Pseudo-elemento after

El pseudo-elemento after inserta texto después del elemento. Se utiliza únicamente junto con la propiedad content, que define el texto que se debe insertar.

Sintaxis

cssselector::after {
  content: 'texto';
}

Ejemplo

Hagamos que al pasar el cursor sobre li se inserte texto al final:

html<ul>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
</ul>

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

Результат:

Ejemplo

Al texto insertado se le pueden aplicar varios estilos. Pintemos, por ejemplo, este texto de algún color:

html<ul>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
</ul>

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

Результат:

Véase también