Pseudoelement after

Das Pseudoelement after fügt Text nach dem Element ein. Wird nur gemeinsam mit der Eigenschaft content verwendet, die den einzufügenden Text festlegt.

Syntax

cssSelector::after {
  content: 'Text';
}

Beispiel

Lassen Sie uns die li so gestalten, dass bei Mouseover am Ende 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::after {
  content: '!!!';
}

Результат:

Beispiel

An den einzufügenden 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::after {
  color: red;
  content: '!!!';
}

Результат:

Siehe auch