:: před / :: po - Triky CSS | Almanach CSS 2025

::beforeA ::afterpseudo-prvky v CSS umožňuje vložit obsah na stránce, aniž by museli být ve formátu HTML. I když konečný výsledek není ve skutečnosti v DOM, na stránce se objevuje, jako by byl, a v podstatě by vypadal takto:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Jediné důvody, proč používat jeden nad druhým, jsou:

Chcete, aby byl vygenerovaný obsah umístěn před obsahem prvku, pozičně.
::afterObsah je také „po“ ve zdrojovém řádu, takže to bude umístit na vrcholu :: rozmyslí, jestli naskládaných na sebe přirozeně.

Všimněte si, že obsah je stále uvnitř prvku, na který se vztahují. Pojmenování má pocit, že by mohli přijít, víš, před nebo za prvkem, ale je to opravdu před nebo za jiným obsahem uvnitř.

Hodnota pro obsah může být:

Řetězec: content: "a string"; - speciální znaky musí být speciálně zakódovány jako entita unicode. Viz stránka glyfů.
Obrázek: content: url (/path/to/image.jpg.webp); - Obrázek je vložen v přesných rozměrech a nelze jej změnit. Protože věci jako přechody jsou ve skutečnosti obrázky, může být pseudoprvkem přechod.
Nic: obsah: „“; - Užitečné pro clearfix a vkládání obrázků jako obrázků na pozadí (nastavte šířku a výšku a můžete dokonce změnit velikost s velikostí pozadí).
Počítadlo: content: counter(li); - Opravdu užitečné pro stylování seznamů, dokud se neobjeví značka.

Všimněte si, že nemůžete vložit HTML (alespoň se vykreslí jako HTML). content: "";

: vs ::

Každý prohlížeč, který podporuje dvojitý dvojtečku (: :) Syntaxe CSS3 také podporuje pouze syntaxi (:), ale IE 8 podporuje pouze dvojtečku, proto se pro nejlepší podporu prohlížeče prozatím doporučuje použít pouze dvojtečku.

:: je novější formát určený k rozlišení pseudo obsahu od pseudo-selektorů. Pokud nepotřebujete podporu IE 8, neváhejte použít dvojtečku.

Příbuzný

::první řada
::první dopis
Selektory pseudo tříd

Podpora prohlížeče

Malé problémy:

Firefox 3.5 - neumožňuje absolutní umístění pseudo prvků.
V Opera 9.2 se mezery v tomto pseudoelementu zobrazují vždy, jako by to byl pretext.
IE 8 na nich nepodporuje z-index