Encryption is becoming more and more essential on the modern Web. The next iteration of the HTTP protocol, http/2, will require SSL everywhere, and if you’re still using HTTP 1.1 it’s still highly recommended. Let’s Encrypt is a free automated certificate authority that makes it easy to request and renew basic SSL certificates automatically so really there’s no reason not to have one.

That got me thinking, wouldn’t it be nice if we could automatically label HTTPS and HTTP links? A bit of head-scratching later, this is what I came up with:

a[href^="http://"] {
  color: #9f2222;
}
 
a[href^="https://"] {
  color: #115f11;
}
 
a::before {
  font-family: "FontAwesome", sans-serif;
  padding-right: 0.2em;
}
 
a[href^="http://"]::before {
	content: "\f13e";
}
 
a[href^="https://"]::before {
	content: "\f023";
}

All of which leads to HTTPS links that look like this, and HTTP links that look like this.