Prvky ::beforea ::afterpseudo prvky v CSS vám umožňujú vkladať obsah na stránku bez toho, aby musel byť v kóde HTML. Aj keď konečný výsledok nie je v skutočnosti v DOM, na stránke sa zobrazuje, akoby bol, a bol by v podstate taký:
div::before ( content: "before"; ) div::after ( content: "after"; ) before after Jediné dôvody, prečo používať jeden nad druhým, sú:
- Chcete, aby sa vygenerovaný obsah umiestnil pred obsah prvku.
::afterObsah je tiež "po" v zdrojovom poriadku, takže to bude umiestniť na vrchole :: rozmyslí, či naskladaných na seba prirodzene.
Upozorňujeme, že obsah je stále v prvku, na ktorý sa vzťahujú. Pomenovanie má taký pocit, že by mohlo prísť, viete, pred alebo za prvok, ale je to skutočne pred alebo za iným obsahom vo vnútri.
Hodnota pre obsah môže byť:
- Reťazec:
content: "a string";- špeciálne znaky musia byť špeciálne kódované ako entita unicode. Pozrite si stránku s glyfmi. - Obrázok: content: url (/path/to/image.jpg.webp); - Obrázok je vložený v presných rozmeroch a nedá sa zmeniť jeho veľkosť. Pretože veci ako prechody sú v skutočnosti obrázky, pseudoprvkom môže byť aj prechod.
- Nič: obsah: „“; - Užitočné na čistú opravu a vkladanie obrázkov ako obrázkov na pozadí (nastavte šírku a výšku a pri veľkosti pozadia môžete dokonca zmeniť ich veľkosť).
- Počítadlo:
content: counter(li);- Naozaj užitočné pre vytváranie zoznamov štýlov, kým: značka nepríde.
Upozorňujeme, že nemôžete vložiť HTML (aspoň sa vykreslí ako HTML). content: "";
: vs ::
Každý prehliadač, ktorý podporuje dvojitú dvojbodku (: :) Syntax CSS3 podporuje iba syntax (:), ale IE 8 podporuje iba dvojbodku, takže pre najlepšiu podporu prehľadávača sa zatiaľ odporúča používať iba dvojbodku.
:: je novší formát určený na rozlíšenie pseudo obsahu od pseudo-selektorov. Ak nepotrebujete podporu IE 8, pokojne použite dvojbodku.
Súvisiace
- ::prvá línia
- ::prvé písmeno
- Selektory pseudo tried
Podpora prehľadávača
Malé problémy:
- Firefox 3.5 - neumožňuje absolútne umiestnenie pseudo prvkov.
- V Opera 9.2 sú medzery vždy zobrazené v rámci tohto pseudoprvku, akoby išlo o
pretext. - IE 8 na nich nepodporuje z-index
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1,3+ | 3,5+ | 6+ | 8+ | Áno | Áno |