[CSS] Dodaj ikonkę typu linku obok odnośnika bez użycia JavaScript

W tym artykule pragnę zaprezentować jedną bardzo ciekawą i niecodzienną rzecz związaną z CSS. Mianowicie dokładanie obrazka w zależności od typu linka zaprezentowanego na stronie.

Wszystko się opiera na selektorach atrybutów umiesczonych w nawiasach kwadratowych --> [ ]. Dzięki nim możemy określić pewne zależności do jakich ma sie odnosić dany kod CSS.
Przejdźmy więc do przykładu. W tym przypadku kod CSS wygląda następująco:

a[href^="http://"] {
	background: transparent url(../demo/ikony/link.png) center left no-repeat;
	display: inline-block;
	padding-left: 28px;
	line-height: 30px;
}
a[href$='.png'] {
	background: transparent url(../demo/ikony/png_file.png) center left no-repeat;
	display: inline-block;
	padding-left: 28px;
	line-height: 30px;
}
a[href$='.jpg'] {
	background: transparent url(../demo/ikony/jpg_file.png) center left no-repeat;
	display: inline-block;
	padding-left: 28px;
	line-height: 30px;
}

Jak widać, zawiera on nietypowe znaczniki, z którymi się dość rzadko można spotkać na co dzień. To właśnie daje nam tak wspaniałą możliwość zdefiniowana w którego typu linku ma się pojawić dany obrazek 🙂
Tutaj zamieszczam demo z tego artykułu.