My website now shows an icon next to all external links | Hund

Hund

My website now shows an icon next to all external links

Saturday, July 31, 2021

My website now shows an icon next to all external links. I thought it would be a good idea on a website like mine, where there’s a lot of links to both internal and external sources.

Example:

I looked around on the web for a solution to this and I found a way better solution than I was anticipating. As it turns out, it can be done completely automatic with pure CSS.

This is the exact CSS-code for my website to add this feature:

article, section.meta, footer {
    a[href^="xmpp"]::after, a[href^="mailto"]::after,
    a[href^="http"]::after, a[href^="https://"]::after {
        content: "";
        width: 11px;
        height: 11px;
        margin-left: 4px;
        background-image: url("/img/arrow-black.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
    }
    a[href^="https://hund.tty1.se/"]::after { display: none !important; }
}

The first class adds this icon to all my links and the second one removes it from all the links that starts with the URL https://hund.tty1.se/.

Original source

Meta

Feedback

If you want to leave feedback, you can do so by either sending me a message via email, XMPP, IRC or by commenting on this post on Mastodon.