Pseudoelement before

Das Pseudoelement before fügt Text vor einem Element ein. Wird nur in Verbindung mit der Eigenschaft content verwendet, die den einzufügenden Text festlegt.

Syntax

cssSelektor::before {
  content: 'Text';
}

Beispiel

Lassen Sie uns die li-Elemente so gestalten, dass bei Hover am Anfang der Text eingefügt wird:

html<ul>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
</ul>

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

Результат:

Beispiel

An den eingefügten Text können verschiedene Stile angewendet werden. Färben wir diesen Text zum Beispiel in einer beliebigen Farbe ein:

html<ul>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
</ul>

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

Результат:

Siehe auch