I would like to distinguish between external and internal links using just CSS.
I would like to add a small icon to the right side of these links, without it covering up other text.
The icon I would like to use is the icon used on Wikipedia.
For example, this is an external link:
<a href="http://stackoverflow.com">StackOverflow</a>
This is an internal link:
<a href="/index.html">home page</a>
How can I do this using just CSS?
demo
Basics
Using
:after
we can inject content after each matched selector.The first selector matches any
href
attribute starting with//
. This is for links that keep the same protocol (http or https) as the current page.These are the traditionally more common urls, like http://google.com and https://encrypted.google.com
We can then pass a url to the content attribute to display the image after the link. The margin can be customized to fit the
Allow certain domains as local
Let's say we're on
example.org
and we want to mark links toblog.example.org
as on the same domain for this purpose. This is a fairly safe way to do it, however we could have a url like http://example.org/page//blog.example.org/note: make sure this comes after the above in your styles
For more strict matching, we can take our initial settings and override them.