MENU

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 připravujeme

Kam dál

Kurz HTML a CSS | Seznam všech CSS vlastností

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548