> cd /

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 {

You even can show the full link at hover :

a:after {
        font-size: small !important;
        content: " \003C" attr(href) "\003E " !important;

Comments ?

Diff list