Add icon to links with CSS to identify protocol (+ bonus)
You can quickly identify the nature of a link with a few lines of CSS.
According to the protocol (http, gopher, mailto...), or if the link is an inner link, a tiny icon will be displayed next to it :
a[href^="http"]::after {
content:' 🌐'
}
a[href^="gemini"]::after {
content:' 🚀'
}
a[href^="gopher"]::after {
content:' 🕳'
}
a[href^="mailto"]::after {
content:' 📧'
}
a[href^="/"]::after {
content:'→'
}
You even can show the full link at hover :
a:after {
font-size: small !important;
content: " \003C" attr(href) "\003E " !important;
}