Post

Apologies for tagging directly, but I am interested in what pros think about styling outbound links. cc: @bram.us @kevinpowell.co @nerdy.dev @una.im

mina86@mina86.com

Styling external (i.e. outbound) links differently from internal ones (Wikipedia style), yea or nay? I’m interested in everyone’s thought. Is it useful? Too much visual clutter? Read more, including description of three #CSS methods of getting such styling, at mina86.com/2026/styling...

0 reposts5 likes

I like to do that too, most of the times and plan to add it to my blog too... As always they are exceptions where it's just noisy,e.g. when there are many external links or most links are external anyways

It depends on the purpose of the site and how much you are linking internally vs externally. On my blog I do this because I think it's very helpful in letting users stay on the blog if they want to. On a product website I'd probably never do this

Good point. I’m thinking of websites/blogs with articles where it’s 50/50 whether link is internal or external. Also, I sometimes find the opposite annoying. When news site link, say, a product name and I want to go to that product’s site, but it goes to a list of other articles about that product.

Hey thanks for tagging the pros! I do this as well on my site and it's interesting to see their responses.

I would only style external links differently (with that arrow icon) to indicate that they open in a new tab/window. (But I'm also not a fan of "target=_blank", so I don't need to do that often)

Something else I have seen, is that external links get prefixed with the favicon of the external website.

It depends (is always the answer) Inline I don’t find it improves the UI but sometimes if I have a list of mixed resources I might indicate with an arrow icon.

a[href]:not(:local-link(0))::before { content: src(url-pattern(":protocol:hostname", attr(href type(<url>))) "/favicon.png"); } well, almost there

Unless css-content gets even more advanced: :any-link::before { content-image: target-icon(attr(href url)); content-info: target-title(attr(href url)); }