7.2. Pseudoelementy

Pseudoelementy, na rozdíl od pseudotříd, nám umožňují upravovat části dokumentu, aniž by tyto byly zaneseny v HTML dokumentu. Používají se především pro dekorativní účely a pomáhají výrazně zvýšit schopnost kódovat zajímavé efekty na stránkách.

selektor::pseudoelement {
  vlastnost:hodnota;
}

Tvoření virtuálních elementů

Nejčastěji používané pseudoelementy jsou ::before a ::after. Jak již z názvu vyplývá, umožňují nám přidat virtuální element před a za stylovaný prvek HTML dokumentu. Pro každý HTML prvek dokumentu lze přidat právě jeden pseudoelement ::before a ::after.

Vzhledem k tomu, že tyto pseudoelementy nejsou součástí HTML dokumentu, neobsahují žádný obsah. K tomu, abychom tento obsah nadefinovali slouží vlastnost content. Bez této vlastnosti se pseudoelement nebude zobrazovat. Mnohdy se jako hodnota pro vlastnost content používá pouze mezera. Tj. content: ' ';.

Tyto pseudoelementy mají širokou škálu použití. Zde uvedeme nejčastěji používané.

Například můžeme změnit výchozí nudné tečky seznamů na zlaté hvězdičky.

<ul class="stars">
  <li>Polárka</li>
  <li>Slunce</li>
</ul>

.stars {
  list-style-type: none;
  padding-left: 0;
}

.stars li::before {
  content: '\2605';
  color: gold;
  margin-right: 1rem;
}