::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 Level 1
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

BCD tables only load in the browser

Véase también