Co je to pseudo-prvek?

Pseudo-element v CSS je klíčové slovo, které se přidává k selektoru a umožňuje stylovat určitou část prvku bez explicitního vytváření dalších prvků DOM.

Nejčastěji používané pseudo-elementy jsou:

• ::before: Vkládá generovaný obsah před obsahem vybraného prvku.
• ::after: Vkládá generovaný obsah za obsah vybraného prvku.
• ::first-line: Aplikuje styly na první řádek blokového prvku.
• ::first-letter: Aplikuje styly na první písmeno blokového prvku.
• ::selection: Aplikuje styly na část prvku, kterou uživatel vybral (například při zvýraznění textu myší).
• ::placeholder: Aplikuje styly na text zástupce v polích <input> nebo <textarea>.

Příklad použití ::before a ::after:

div::before {
  content: "Předpona: "; // Povinná vlastnost content
  barva: modrá;
}

div::after {
  content: " Přípona"; // Povinná vlastnost content
  barva: červená;
}

Příklad použití ::first-line a ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudo-elementy jsou užitečné pro přidávání dekorativních prvků, generování obsahu, stylování částí textu a další úkoly, což zjednodušuje strukturu HTML. Historicky začínaly jedním dvojtečkem (:), ale specifikace CSS3 zavedla dva dvojtečky (::) pro rozlišení pseudo- tříd (:hover, :focus) a pseudo-elementů, ačkoli jeden dvojtečka (:) je stále podporována většinou pro starší pseudo-elementy. Doporučuje se používat ::.