I am constantly improving the user experience and the appearance of my website, especially the look and feel of the blog. Yesterday, while going through one of the posts, I noticed that there are quite a few external links in the post, and clicking on them naturally led me to an external website.
This is actually beneficial since outbound links enhance the user experience when used appropriately. However, I realized that I couldn’t distinguish between an external link and an internal link on the website, and that bothered me.
From my perspective, it might be helpful for documentation pages, blogs, and articles to differentiate between internal and external links. This is because it can be frustrating to be reading a particular article and clicking on a link takes you to another website without your knowledge. This is especially relevant for articles that extensively use both types of links.
This is a type of UX issue, and a nice solution is to design outbound links on the website slightly differently. It could be a different color or any visual indicator you choose. In my case, I decided to add the icon 
.
One simple way to implement this is by using Pseudo element in CSS that targets only links that do not contain the address savvy.co.il, as shown in the following example:
article a[href*="//"]:not([href*="savvy.co.il"]):after {
content: "";
width: 11px;
height: 11px;
margin-right: 3px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f9db46' class='bi bi-box-arrow-up-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.364 3.5a.5.5 0 0 1 .5-.5H14.5A1.5 1.5 0 0 1 16 4.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 3 14.5V7.864a.5.5 0 1 1 1 0V14.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5H7.864a.5.5 0 0 1-.5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 0 1H1.707l8.147 8.146a.5.5 0 0 1-.708.708L1 1.707V5.5a.5.5 0 0 1-1 0v-5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-left: 2px;
}
In this example, we are targeting only the links within the <article> element on the page, so it won’t affect links in the navigation menu, footer, and similar sections.
The icon I used is this icon from the Bootstrap icon library, but you can use any icon you prefer. To convert the SVG to a data:image, I used a URL-encoder for SVG service.
One drawback of this method is that if there are images with links in the body of the post, the icon will also appear on those. The :has() feature in CSS could be an excellent solution for this situation, but unfortunately, browser support for it is not widespread enough.
Do you have another solution? Do you agree that styling external links slightly differently could enhance the user experience in these cases? I would love to hear your thoughts in the comments. 🙂
