Search code examples
cssbrowsersafaripseudo-element

CSS: Adding an Icon to external links - Safari Issue

I'm trying to add an icon to all external links with a target="_blank" attribute in my project. The following code snippet works well in Chrome but doesn't show the icon in Safari:

.external-link a[target="_blank"] {
  display: inline-flex;
  align-items: center;
}

.external-link a[target="_blank"]::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='currentColor' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='currentColor' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: padding-box inset(0.28125em 0);
}

This CSS code uses an SVG image with the mask-image property to create the icon. The icon is supposed to be added as an ::after pseudo-element to the external links, but it doesn't show up in Safari.

Can anyone help me to find a solution that works in both Chrome and Safari?

I tried using

-webkit-url()

but that didn't do any difference.

Solution

  • It works when you remove the clip-path CSS attribute, is that necessary for your use case?

    .external-link a[target="_blank"] {
  display: inline-flex;
  align-items: center;
}

.external-link a[target="_blank"]::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='currentColor' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='currentColor' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
    <div class="external-link">
  <a target="_blank" href="https://example.com">Example</a>
</div>