Decorating all external links

Development

AI-generated summary

Decorating all external links

User Overgrow wants to mark external links with an arrow using CSS and asks if modifying ES6 functions is necessary. Mittineague suggests a CSS-only solution by targeting a[rel="nofollow"] elements.

div.cooked a[rel="nofollow"]::after {
  content: "\2794";
}

Mittineague also provides a resource for alternative arrow symbols.

Alternatively, Falco proposes using Font Awesome icons with the following code:

div.cooked a[rel="nofollow"]::after {
  content: "\f0c1";
  font: normal normal normal 14px/1 FontAwesome;
}
1

Hello,
I’d like to mark external links (links except from own domain) with an arrow through css.. Do I need to modify all es6 functions that parse links or is there simple way?

if (DiscourseURL.isInternal(href))

Also I’m not sure if this is definitive list of sources where links are parsed and styled

_showLinkCounts()  in /app/assets/javascripts/discourse/widgets/post-cooked.js.es6
linkHtml(link) in app/assets/javascripts/discourse/widgets/post-links.js.es6 
html(attrs, state) in /app/assets/javascripts/discourse/widgets/topic-map.js.es6

Thanks in advance!

2

You can get close using only CSS eg.

div.cooked a[rel="nofollow"]::after { 
  content: "\2794";
}

One potential issue, if you have nofollow removed for your TL3 members.

3

Cool tip! Thanks, I’ll give it a try..

4

If you don’t like that arrow you could try others (replace the “U+” with a backslash).

“\2794” looks like this

nofollow-link-arrows.png159×103 3.36 KB

5

You can also use all Font Awesome icons with:

div.cooked a[rel="nofollow"]::after {
    content: "\f0c1";
    font: normal normal normal 14px/1 FontAwesome;
}