Tzv. pseudo-elementy :before a :after se hodí v situacích, kdy je potřeba vytvořit nějaký obsah bez úprav HTML kódu.

Této vlastnosti se hojně využívá při kreslení pomocí CSS / CSS ikon, kde se díky tomu z jediného HTML elementu dají vytvořit velké věci.

Využívat :before a :after se zdálo být nemožné u elementů, které „nemají obsah“. To je:

• většina nepárových značek (<img>, <br>) – výjimka je většinou značka <hr>,
• formulářové prvky (<input>, <textarea>, <select>)

Pseudo-elementy u některých typů <input>u

Se zajímavým zjištěním přišel Pepa Linha – prohlížeče vycházející z Webkitu (Opera 15+, Chrome, Safari) umí vykreslit pseudo-elementy u <input type=checkbox>, <input type=radio> nebo <input type=range>.

To by při podpoře napříč prohlížeči byla užitečná věc, protože by šlo jednodušeji vytvářet vlastní styl přepínačů a zaškrtávacích políček.

Test :after u některých <input>ů:

Pokud u políček výše ↑ funguje :before/:after, objeví se to vedle nich popis funguje.

Příklad pseudo-elementu u více HTML značek:

Stará Opera

Opera do verse 12 umí pseudo-elementy u značky <br> a naopak je neumí u vodorovné čáry <hr>.

Víte ještě o nějakých výjimkách? Dejte mi prosím vědět do komentářů.