CSS pseudo element :after (potažmo :before) je relativně málo známá, přesto velmi silná zbraň v rukou CSS kodéra. Umožňuje vám přidat nějaký obsah za (před) element, ke kterému se váže (to se ještě ví), a navíc pak tento prvek i nastylovat (a to se už ví méně).
Příklad takového pokročilého použití – představte si, že máte nějaký prvek a chcete k němu přidat stín – představte si například špendlík na mapě. HTML kód bude třeba
<a href="#" class="spendlik restaurace">Restaurace</a>
<a href="#" class="spendlik hotel">Hotel</a>
A teď použijeme následující CSS, které nám umožní mít různé definice pro špendlík, ale společnou (a nebo taky klidně jinou) definici pro jejich stín, aniž bych musel do HTML přidat byť jen jedinou čárku.
.spendlik {
width:40px;
height: 40px;
background: url(vychozi-spendlik.png) no-repeat left top;
position: relative;
}
.spendlik.restaurace {
background-image: url(restaurace.png);
}
.spendlik.hotel {
background-image: url(hotel.png);
}
.spendlik:after {
width:40px;
height: 40px;
content: "";
background: url(marker_shadow.png) no-repeat left top;
position: absolute;
right: 0px;
}
Předpokládám, že kodéři si asi dokáží představit jak to bude vypadat, takže se nebudu namáhat udělat demo 
No related posts.
