Resumen

El pseudo-elemento CSS ::after coincide con el último hijo virtual del elemento seleccionado. Se usa generalmente para añadir contenido estético a un elemento, usando la propiedad CSS content. Este elemento se muestra en línea con el texto de forma predeterminada.

Sintaxis

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

La notación ::after (con doble símbolo :) fue introducida en CSS 3 para establecer la diferencia entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación :after introducida en CSS 2.

Ejemplos

Uso simple

Crearemos dos clases: una para párrafos aburridos y otra para párrafos interesantes. Después podremos resaltar cada párrafo añadiendo un pseudo-elemento al final del mismo.

<p class="boring-text">Here is some good old boring text.</p>
<p>Here is some moderate text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>
.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

.boring-text::after {
   content: "<- BORING!";
   color: red;
}

Resultado

Ejemplo decorativo

Podemos estilizar el texto o imágenes de la propiedad content de casi cualquier forma que queramos.

<span class="ribbon">Notice where the orange box is.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Resultado

Tooltips

El siguiente ejemplo muestra el uso del pseudo-element ::after en conjunto con la expresión CSS attr() y el atributo data personalizado data-descr para crear un tooltip de tipo glosario, completamente en CSS. Mira la vista previa más abajo, o también puedes ver el ejemplo en una página separada.

<p>Here is the live example of the above code.<br />
  We have some <span data-descr="collection of words and punctuation">text</span> here with a few
  <span data-descr="small popups which also hide again">tooltips</span>.<br />
  Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
</p>
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  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

Especificaciones

Especificación Estatus Comentarios
CSS Pseudo-Elements Level 4
La definición de '::after' en esta especificación.
Working Draft Sin cambios significativos desde la especificación previa.
CSS Transitions
La definición de 'transitions on pseudo-element properties' en esta especificación.
Working Draft Permite transiciones en propiedades definidas en los pseudo-elementos.
CSS Animations
La definición de 'animations on pseudo-element properties' en esta especificación.
Working Draft Permite animaciones en propiedades definidas en los pseudo-elementos.
Selectors Level 3
La definición de '::after' en esta especificación.
Recommendation Introduce la sintaxis de doble símbolo :
CSS Level 2 (Revision 1)
La definición de '::after' en esta especificación.
Recommendation Definición inicial, usando sintáxis de un solo símbolo :

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte de :after (Yes) 1.0 (1.7 o anterior)[1] 8.0 4 4.0
Soporte de ::after (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Soporte de animaciones y transiciones 26 4.0 (2.0) Sin soporte Sin soporte Sin soporte
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte de :after (Yes) ? ? ? ?
Soporte de ::after (Yes) ? ? ? ?
Soporte de animaciones y transiciones (Yes) 4.0 (4.0) Sin soporte Sin soporte Sin soporte

[1] Firefox, antes de su versión 3.5, solo implementaba la versión :after de CSS 2.0. No estaban permitidas position, float, list-style-* y algunas propiedades de presentación. Firefox 3.5 eliminó esas restricciones.

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz, Lorenzoygata, teoli, Nathymig
 Última actualización por: israel-munoz,