En CSS,::after crea unpseudoelemento que es el último hijo del elemento seleccionado. Es comúnmente usado para añadir contenido cosmético a un elemento con la propiedadcontent. Está en línea de forma predeterminada.

Pruébalo

a::after {  content: " (" attr(href) ")";}.dead-link {  text-decoration: line-through;}.dead-link::after {  content: url("/shared-assets/images/examples/warning.svg");  display: inline-block;  width: 12px;  height: 12px;}

<p>  El pez vela recibe su nombre debido a su aleta dorsal en forma de vela y es  ampliamente considerado el pez más rápido del océano.  <a href="https://en.wikipedia.org/wiki/Sailfish"    >Puedes leer más sobre ello aquí</a  >.</p><p>  El pez león rojo es un pez escorpión depredador que vive en los arrecifes de  coral del océano Indo-Pacífico y, más recientemente, en el Atlántico  occidental.  <a href="">Puedes leer más sobre ello aquí</a>.</p>

Sintaxis

::after {  content: /* valor */;  /* propiedades */}

Descripción

El pseudoelemento::after es una caja en línea generada como una hija inmediata del elemento al que está asociado, o el «elemento de origen». Se utiliza a menudo para añadir contenido cosmético a un elemento a través de la propiedadcontent, como iconos, comillas, u otra decoración.

Los pseudoelementos::after no se pueden aplicar areplaced elements como<img>, cuyo contenido es determinado por recursos externos y no se ven afectados por los estilos del documento actual.

Un pseudoelemento::after con un valor dedisplay igual alist-item se comporta como un elemento de lista, y por lo tanto puede generar un pseudoelemento::marker igual que un elemento<li>.

Si la propiedadcontent no está especificada, tiene un valor inválido, o tienenormal onone como valor, el pseudoelemento::after no se renderizará. Se comporta como si se hubiera establecidodisplay: none.

Accesibilidad

Se desaconseja utilizar un pseudoelemento::after para añadir contenido, ya que no es accesible de forma fiable para los lectores de pantalla.

Ejemplos

Ejemplo básico

Vamos a crear dos clases: una para los párrafos aburridos y otra para los emocionantes. Podemos utilizar estas clases para añadir pseudoelementos al final de los párrafos.

HTML

<p>Aquí hay un texto viejo y aburrido.</p><p>Aquí hay un texto normal que no es ni aburrido ni emocionante.</p><p>Contribuir a MDN es fácil y divertido.</p>

CSS

.exciting-text::after {  content: " <- ¡IMPRESIONANTE!";  color: darkgreen;  font-weight: bolder;}.boring-text::after {  content: " <- ABURRIDO";  color: darkviolet;  font-weight: bolder;}

Resultado

Ejemplo decorativo

Podemos estilizar texto o imágenes con la propiedadcontent casi como queramos.

HTML

<span>Mira el recuadro naranja después de este texto. </span>

CSS

.ribbon {  background-color: #5bc8f7;}.ribbon::after {  content: "Esta es una elegante caja naranja.";  background-color: #ffba10;  border-color: black;  border-style: dotted;}

Resultado

Tooltips

Este ejemplo usa::after en conjunto con la expresión CSSattr() y unatributo de datos personalizadodata-description para crear tooltips. ¡No es necesario JavaScript!

También podemos ayudar a los usuarios de teclado con esta técnica, añadiendo untabindex de0 para hacer que cadaspan sea enfocable desde el teclado, y utilizando un selector CSS:focus. Esto demuestra lo flexibles que::before y::after pueden ser, aunque para una experiencia más accesible, probablemente sea más apropiado un widget de divulgación semántica creado de alguna otra forma (como con elementosdetails y summary).

HTML

<p>  Aquí tenemos un poco de  <span    tabindex="0"    data-description="colección de palabras y signos de puntuación">    texto  </span>  con algunos  <span    tabindex="0"    data-description="pequeñas ventanas emergentes que aparecen al pasar el ratón por encima">    tooltips </span  >.</p>

CSS

span[data-description] {  position: relative;  text-decoration: underline;  color: #00f;  cursor: help;}span[data-description]:hover::after,span[data-description]:focus::after {  content: attr(data-description);  position: absolute;  left: 0;  top: 24px;  min-width: 200px;  border: 1px #aaaaaa solid;  border-radius: 10px;  background-color: #ffffcc;  padding: 12px;  color: #000000;  font-size: 14px;  z-index: 1;}

Resultado

Pseudoelementos anidados::after::marker

Elpseudoelemento anidado::after::marker selecciona el::marker de lista de un pseudoelemento::after que es a su vez un elemento de lista, es decir, que tiene su propiedaddisplay establecida alist-item.

En esta demo, generamos elementos de lista adicionales antes y después de un menú de navegación de lista utilizando::before y::after (configurándolos adisplay: list-item para que se comporten como elementos de lista). Luego usamosul::before::marker yul::after::marker para dar a sus marcadores de lista un color diferente.

HTML

<ul>  <li><a href="#">Introducción</a></li>  <li><a href="#">Para empezar</a></li>  <li><a href="#">Conceptos básicos</a></li></ul>

CSS

ul {  font-size: 1.5rem;  font-family: Arial, Helvetica, sans-serif;}ul::before,ul::after {  display: list-item;  color: orange;}ul::before {  content: "Inicio";}ul::after {  content: "Final";}ul::before::marker,ul::after::marker {  color: red;}

Resultado

Mientras que las viñetas de lista de los tres elementos de navegación se generan porque son elementos<li>, «Inicio» y «Fin» se han insertado mediante pseudoelementos y se utiliza::marker para dar estilo a sus viñetas.

Especificaciones

Compatibilidad con navegadores

Véase también

• ::before
• content