Pseudo elementy – pseudo-elements
Pseudo elementy jsou prvky buď vložené před, nebo za HTML elementy, a to pomocí CSS (JavaScript umí vkládat také, ale to nepatří do této stránky), nebo ovlivnění i takových částí HTML kódu, které nemají samostatnou znač (tag), např. první písmeno či první řádek.
DŮLEŽITÉ: V tomto článku nenajdete základní selektory, ani pseudo-classes. Pokud jste začátečník, pak začněte článkem, který se zabývá základními CSS selektory, navazuje na něj článek pseudo-classes. Tímto článkem pokračujete až jako další třetí krok.
::before
Tento pseudo-elements vytvoří za uvedeným HTML tagem (např. za <a>) něco dalšího, třeba tam vloží obrázek apod.
Ukázka CSS:
a.externi::before {content: url(adresar/obrazek.jpg); }
Vysvětlení: Pokud nějaký odkaz pomocí HTML značky <a>bude mít současně třídu s názvem externi, tedy tento případ <a class="externi"…>, pak za tento prvek bude vložen obrázek umístěný na uvedené cestě tedy adresar/obrazek.jpg. Vložení provede CSS vlastnost content
Pro ::before můžete používat většinu CSS vlastností, pokud to dává smysl.
::after
V principu platí totéž, co pro ::before, ale ::after vkládá před HTML značku.
::first-letter
Vytváří první písmeno jako pseudo element, který je možné nastylovat samostatně, aniž by musel být nějak ohraničen, např. HTML značkou <span>.
Příklad:
p::first-letter {color: red;}
::first-line
Dokáže označit celý první řádek, tedy až do místa jeho zalomení, kdy text narazí na hranici designu a dojde k zalomení na nový řádek. To je nesmírně užitečné, protože u responzivního designu může být délka skutečného řádku proměnlivá a označení pomocí nějaké značky např. <span> jen těžko řešitelné.
Další selektory
Aby nebyl článek příliš dlouhý, tak další návody jsme umístili do dalších článků:
- Základní CSS selektory, které předcházejí tomuto článku naleznete zde.
- Pseudo-classes které předcházejí tomuto článku naleznete zde.
- Praktické používání kombinací různých selektorů a vztahy mezi nimi. Článek zde.