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

Ta wersja: blog.piotrnalepa.pl/2009/06/25/css-dodaj-ikonke-typu-linku-obok-odnosnika-bez-uzycia-javascript
Opublikowano: 25 czerwca 2009
Autor: Piotr Nalepa, Staff Software Engineer
Kategoria: CSS
Uwagi: Napisz do mnie · Napisz na X

Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

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:

Przykład 1CSS

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.

Masz jakieś uwagi?

Napisz do mnie Napisz na X

O autorze

Piotr Nalepa

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!

Masz jakieś uwagi?

O autorze

Powiązane wpisy