::after (:after)

En CSS, ::after crea un pseudo-elemento que es el último hijo del elemento seleccionado. Es comunmente usado para añadir contenido cosmético a un elemento con la propiedad content.Es en linea (inline) de forma predeterminada.

/* Añdade una flecha después de los enlaces */
a::after {
  content: "";
}

Nota: Los pseudo-elementos generados por  ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto no aplica a elementos reemplazados como los elementos <img>, o <br>.

Sintaxis

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

Nota: CSS3 introdujo la notación ::after (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :after, añadido en CSS2.

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.

HTML

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

CSS

.exciting-text::after {
  content: " <- 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.

HTML

<span class="ribbon">Look at the orange box after this text. </span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Resultado

Tooltips

El siguiente ejemplo muestra el uso del pseudo-elemento ::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.

HTML

<p>Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
</p>

CSS

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
::afterChrome Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Firefox Soporte completo 1.5
Notas
Soporte completo 1.5
Notas
Notas Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Notas Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
IE Soporte completo 9
Soporte completo 9
Soporte completo 8
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Opera Soporte completo 7
Soporte completo 7
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Safari Soporte completo 4
Soporte completo 4
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
WebView Android Soporte completo ≤37
Soporte completo ≤37
Soporte completo ≤37
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Chrome Android Soporte completo 18
Soporte completo 18
Soporte completo 18
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Firefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Notas Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Opera Android Soporte completo 10.1
Soporte completo 10.1
Soporte completo 10.1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Safari iOS Soporte completo 3.2
Soporte completo 3.2
Soporte completo 3.2
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Samsung Internet Android Soporte completo 1.0
Soporte completo 1.0
Soporte completo 1.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :after
Animation and transition supportChrome Soporte completo 26Edge Soporte completo 12Firefox Soporte completo 4IE Sin soporte NoOpera Soporte completo 15Safari Sin soporte NoWebView Android Soporte completo ≤37Chrome Android Soporte completo 26Firefox Android Soporte completo 4Opera Android Soporte completo 14Safari iOS Sin soporte NoSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.
Usa un nombre no estandar.
Usa un nombre no estandar.

Véase también