Improve the UX of your links that open in a new tab or window

Have you ever clicked on a link expecting to stay on the same tab, only to see it open another tab? It can be frustrating for your visitors too! What if you could add an icon before the link suggesting that it opens in a new tab?

Don’t worry. You don’t have to re-write your entire markup. You can use CSS to add icons before those specific links, so your visitors can easily identify when a link will take them away from your site. Something like this 👇

Consider this HTML:

<p>
  A link that opens a new tab
</p>
<a href="https://example.com" target="_blank">View this example</a>
<p>
  Here's one that stays on the same
</p>
<a href="/about.html">About us</a>

Adding target=”_blank” is what takes the user to a new tab. So, let’s target only these links and add the icons.

a[target="_blank"]:before {
  content: "\f35d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 5px;
}

And that’s it! Your visitors can now clearly see which links open in new tab.

Check out the demo on Codepen.

In simple terms, using the [target="_blank"] attribute selector and the :before pseudo-element, you can easily add external icons to your links.

I hope this issue helped you learn something new :) If you have any questions, don't hesitate to get in touch with me! Just hit a reply.

---

📘 I’m writing a new book!

If you loved this write-up and how it was explained, you’ll absolutely love my next eBook Level up with Tailwind CSS. Opened pre-orders three weeks ago and a hundred people have grabbed it already 🤯 Check it out!

📨 Newsletter suggestion

I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇

Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.