Pseudo-element before

Het pseudo-element before voegt tekst in voor een element. Wordt alleen gebruikt in combinatie met de eigenschap content, die de in te voegen tekst specificeert.

Syntaxis

cssselector::before {
  content: 'tekst';
}

Voorbeeld

Laten we ervoor zorgen dat bij het hoveren over een li de tekst wordt ingevoegd aan het begin:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Voorbeeld

Op de in te voegen tekst kunnen verschillende stijlen worden toegepast. Laten we deze tekst bijvoorbeeld in een kleur inkleuren:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Zie ook