Pseudoprvky

Pojmem pseudoprvky se označují fiktivní prvky, které sice na stránce lze vymezit, ale nejsou přítomny v jejím kódu. Z hlediska syntaktického se zapisují stejně jako pseudotřídy – od jména prvku se oddělují dvojtečkou.

Bohužel podpora pseudoprvků v klientech není nijak slavná.

first-line

Vztahuje se na první řádek formátované podoby dotyčného prvku. Například chcete-li, aby první řádek ve všech odstavcích byl zelený, použijte

p:first-line { color: green; }

Lze jej používat jen pro blokové prvky.

first-letter

Označuje první písmeno prvku a dá se použít pro vytvoření iniciály (výrazného ozdobného prvního písmene). Například

p:first-letter {
    color:      red;
    font-size:  300%;
    float:      left;
}

Výsledek si můžete prohlédnou na příkladu, kde jej navíc kombinuji se změnou barvy prvního řádku.

before a after

Dvojice velmi speciálních pseudoprvků, kterými můžete do stránky přidávat texty. Používají se v kombinaci s vlastností content, jejíž hodnotou je vkládaný text. Pseudoprvek before řídí, co se přidá před cílový prvek, zatímco after rozhoduje o tom, co se přidá za něj.

Dříve jsem například použil třídu „poznamka“ k odlišení poznámek na stránce. Prostřednictvím before bych mohl na jejich začátek automaticky vložit slovo „Poznámka: “

.poznamka:before {
    content: "Poznámka: ";
    font-weight: bold;
}

Když se pak ve zdrojovém textu stránky objeví

<p class="poznamka"> Ne všichni klienti to podporují.</p>

správně fungující klient by měl před text předřadit tučné slovo Poznámka. A jak je na tom váš klient? Podívejte se:

Ne všichni klienti to podporují.

Pomocí těchto pseudoprvků lze například i automaticky přidávat pořadová čísla do nadpisů a dělat podobné vylomeniny. Současná podpora v prohlížečích už je dostatečná na to, aby to bylo reálně použitelné.