How to decorate external links with only CSS one line

When reading online, I’m a little reluctant to click if there are links to other sites. If the post is short, I read the post and open it separately, or if the post is long, I open it with a new tab in the middle. In this case, how about marking the external link nicely? There is a really simple way to display external links with just one line of CSS.

If you look at the link below, there is no link emoji on my blog link.
However, on external links, you will see an emoji following the link.

The secret is just one line of CSS below.

You can copy the code above and modify it appropriately.

  1. Replace the .article with the parent element surrounding the article
  2. Replace address.com with the site address to apply
  3. If you are going to apply the style on the back like me, keep :after alive (if you are going to decorate the front, change it to :before)
  4. Then, apply the CSS style you want.

What happened?

You will understand the CSS one by one.

  1. .article – an element contained in other element with ‘article’ class
  2. a – Among the ‘a’ tags
  3. a[href*="//"] – Matches the ‘href’ attribute containing the character ‘//’.
  4. :not([href*="address.com"]) – And with a selector named ‘:not’, only links that do not contain address.com in the ‘href’ attribute are selected.

In the end, only external links will affected. 🙂

Leave a Reply