Pseudo-prvek (dvojitá dvojtečka ::) stylizuje konkrétní část prvku nebo generuje obsah, který není v HTML — bez přidání dalšího značení.
::before a ::after — generovaný obsah
css
{
: ;
}
{
: ;
}
Pseudo-prvek (dvojitá dvojtečka ::) stylizuje konkrétní část prvku nebo generuje obsah, který není v HTML — bez přidání dalšího značení.
{
: ;
}
{
: ;
}
Vlastnost content je povinná — bez ní se pseudo-prvek nevykresluje. Generovaný obsah je potomkem na samém začátku (::before) nebo na konci (::after) prvku.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Toto je klasické použití: kreslení šipek, odznaků, překrytí, dekorativních čar — udržování HTML čistého od čistě vizuálních prvků.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 zavedlo :: k rozlišení pseudo-prvků od pseudo-tříd (prohlížeče stále přijímají jednu dvojtečku u starších pro kompatibilitu, ale používejte ::).
Generovaný obsah čtou některé čtečky obrazovky — neumisťujte základní informace pouze do ::before/::after (používejte jej pro dekoraci) a dekorativní ikony je nejlépe vynechat ze stromu dostupnosti.
Pseudo-prvky vám umožňují přidávat ikony, dekorativní tvary (šipky, oddělovače), iniciály a čítače čistě v CSS — bez dodatečných <div>ů nebo <span>ů.
Uchováváají značení sémantické a zároveň umožňují bohatá vizuální detaily; jsou základem čistého a udržovatelného stylování.