::after (:after)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* 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

Error: could not find syntax for this item

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

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

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

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

CSS

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

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

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

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también