Style External Links in CSS

A pretty UX feature could be to mark the external links on your site. If you do so your users, visitors will know exactly when you use another domain’s link.

To format external is comfortable with CSS only we need a smart attribute selector. To select an attribute of an element we need to use the square brackets [attribute=”value”].

We can test a lot of attributes in a lot of ways, but a good solution could be:

  • if we check the target=”_blank” value,
  • and if we check it has other domain than ours :not([href*=”pineco.de”]).
a[target="_blank"]:not([href*="pineco.de"])::after {
    /* You can style it anyway you want... */
    content: '';
    display: inline-block;
    background: transparent url(external-arrow.svg) no-repeat center center;
    background-size: cover;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;
}
Need a web developer? Maybe we can help, get in touch!