Isto si spomeniete na prácu s odkazmi (<a></a> tag), pri nich sme sa v CSS stretli s rôznymi triedami napr.: :hover, :active a pod. tieto classy neexistovali. Teda neexistovali v ponímaní z HTML pohľadu, naše odkazy nemali v sebe napisane <a class=”hover”></a> a podobne. A predsa bolo možné tieto triedy používať v CSS. Tieto triedy sú virtuálne a voláme ich trošku inak a to PSEUDO triedy (pseudo classes).
Presne ako existujú pseudo triedy existujú aj pseudo elementy, sú to elementy ako hocijaké iné html elementy (div, p, a), až na jednu vlastnosť, nie sú html. Tieto elementy sú virtuálne sú pridávané iba pomocou CSS. Tieto elementy môžu byť aplikované iba na existujúce html elementy a to tak, že je pseudo element môžeme pridať buďto pred, alebo za náš reálny element.
Pomocou CSS príkazu :before pridáme virtuálny element pred a pomocou :after pridáme virtuálny element za náš existujúci html element. Pre zobrazenie virtuálneho elementu je dôležité definovať jeho obsah pomocou príkazu content: “obsah”;. Príkaz content je striktne spätý s virtuálnym elementom a bez neho element nebude zobrazený. Keď chceme, môžeme definovať aj prázdny obsah, ale príkaz content musí byť obsiahnutý. Berme to ako pravidlo, ktoré proste musí byť dodržané.
Pozrite si jednoduchý návod s praktickou ukážkou ako je možné virtuálne / pseudo elementy používať.

Komentáre

Povedzte nám čo si myslíte.

Pridaj komentár

Vyplňte formulár a odošlite