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 way, 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”]).