Pseudoelement after

Die pseudoelement after voeg teks in na die element. Dit word slegs saam met die eienskap content gebruik, wat die teks spesifiseer wat ingevoeg moet word.

Sintaksis

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

Voorbeeld

Kom ons maak dit so dat wanneer ons oor 'n li beweeg, teks aan die einde daarvan 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::after {
  content: '!!!';
}

Результат:

Voorbeeld

Verskillende 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::after {
  color: red;
  content: '!!!';
}

Результат:

Sien ook