Pseudo-elemento after

Il pseudo-elemento after inserisce testo dopo un elemento. Viene utilizzato esclusivamente insieme alla proprietà content, che specifica il testo da inserire.

Sintassi

cssselettore::after {
  content: 'testo';
}

Esempio

Facciamo in modo che quando si passa il mouse su un li, alla sua fine venga inserito del testo:

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

Результат:

Esempio

Al testo inserito è possibile applicare vari stili. Coloriamo, ad esempio, questo testo di rosso:

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

Результат:

Vedi anche