Pseudo-element a pseudo-třídy

Pokud jste ještě neslyšeli o pseudo-elementech, jsou něco podobného jako pseudo-třídy. Pseudo-třídy přidávají styl na základě určitého stavu elementu. Pseudo-elementy naopak spíše umožňují přidat styl určitým částem elementu, na kterého ukazují. Teorie je sice hezká, ale často hodně matoucí pokud programátor nevidí konkrétní příklad. Pojďme se na něj podívat

Na předchozím příkladu můžete vidět, že pseudo-třída :hover mění barvu elementu a, kdežto pseudo-element ::after přidává styl za určitou část elementu (nezávisle na stavu tohoto elementu), konkrétně v tomto případě na konec elementu a. Nakonec jsem ještě přidal příklad pseudo-elementu v kombinaci s pseudo-třídou (protože tyto dvě pseudo můžeme také kombinovat).

Pseudo-element a vložení HTML entity

Abych se konečně dostal k jádru věci, co kdybychom chtěli do předchozího příkladu přidat HTML entitu, např. → (opravdovou šipku) místo -> (falešné šipky), kterou tam momentálně máme? První věc, co by programátora mohla napadnout je vložit → takto content: '→'. Zde ale narazíte, protože CSS nepoužívá kódování entit jako HTML. Proto, abychom mohli takovou šipku ukázat, potřebujeme dvě věci:

1. Nejprve potřebujeme zjistit desetinnou hodnotu naší entity, můžeme ji nalézt například zde. Desetinná hodnota je to poslední číslo když přejedete myškou přes html entitu. Pro → je to například 8594.
2. Toto desetinné číslo vložíme do políčka Numeric Value na této stránce a v políčku CSS Value dostaneme, co potřebujeme. V našem případě šipky je to hodnota \2192.

Hodnotu \2192 použijeme uvnitř content následovně: content: '\2192';. Pojďme se podívat na náš první příklad upravený, aby obsahoval html entitu.

Závěr

Tak to bychom měli. Doufám, že používání html entit uvnitř pseudo elementů je již jasnější. Kdybyste měli jakékoliv dotazy, zanechte komentář.