CSS Simplified

Share this post

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

shrutibalasa.substack.com

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

Shruti Balasa
Mar 15
2
2
Share this post

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

shrutibalasa.substack.com

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 👇

Thanks for reading CSS Simplified! Subscribe for free to receive new posts and support my work.

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.

Thanks for reading CSS Simplified! Subscribe for free to receive new posts and support my work.

2
Share this post

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

shrutibalasa.substack.com
2 Comments
Saptarshi Majumdar
Mar 15Liked by Shruti Balasa

Learnt a new thing today. Thanks

Expand full comment
Reply
1 reply by Shruti Balasa
1 more comment…
TopNewCommunity

No posts

Ready for more?

© 2023 Shruti Balasa
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing