# Decorating all external links

**URL:** https://meta.discourse.org/t/decorating-all-external-links/53111
**Category:** Development
**Created:** [November 19, 2016, 12:01pm UTC](https://meta.discourse.org/t/decorating-all-external-links/53111 "2016-11-19T12:01:31Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow)
#### Post date: [November 19, 2016, 12:01pm UTC](https://meta.discourse.org/t/decorating-all-external-links/53111/1 "2016-11-19T12:01:31Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [November 19, 2016, 12:18pm UTC](https://meta.discourse.org/t/decorating-all-external-links/53111/2 "2016-11-19T12:18:46Z")

</div>

You can get close using only CSS eg.

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

```

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

---

<div class="post-metadata">

### Author: ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow)
#### Post date: [November 19, 2016, 12:26pm UTC](https://meta.discourse.org/t/decorating-all-external-links/53111/3 "2016-11-19T12:26:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [November 19, 2016, 12:30pm UTC](https://meta.discourse.org/t/decorating-all-external-links/53111/4 "2016-11-19T12:30:33Z")

</div>

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

> **[Arrow symbols ‭→ ▶ ➔‬ Copy and Paste emoticon (◕‿◕) SYMBL](https://symbl.cc/en/collections/arrow-symbols/)**
>
> Looking for Arrow Symbols? Check these out: ‭→ ▶ ➔ ➜ ➝‬‬. Copy & paste up, down, right and left arrow characters and emoticons for any text. Discover more glyphs and emojis at (◕‿◕) SYMBL!

“\2794” looks like this

 ![](https://global.discourse-cdn.com/meta/original/3X/0/4/04ee893392b75c94d713ed5d7c76e6c9f8beea61.png)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [November 19, 2016, 1:35pm UTC](https://meta.discourse.org/t/decorating-all-external-links/53111/5 "2016-11-19T13:35:52Z")

</div>

You can also use all Font Awesome icons with:

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

```