Pseudo-element before

Die pseudo-element before voeg teks in voor 'n element. Dit word slegs saam gebruik met die eienskap content, wat die teks spesifiseer wat ingevoeg moet word.

Sintaksis

cssselektor::before {
  content: 'teks';
}

Voorbeeld

Kom ons maak dit so dat wanneer ons oor 'n li beweeg, teks aan die begin ingevoeg word:

html<ul>
  <li>lys item</li>
  <li>lys item</li>
  <li>lys item</li>
  <li>lys item</li>
  <li>lys item</li>
</ul>

cssli:hover::before {
  content: '!!!';
}

Результат:

Voorbeeld

Verschillende style kan op die ingevoegde teks toegepas word. Laat ons byvoorbeeld hierdie teks in 'n kleur inkleur:

html<ul>
  <li>lys item</li>
  <li>lys item</li>
  <li>lys item</li>
  <li>lys item</li>
  <li>lys item</li>
</ul>

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Sien ook