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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::after
Animation and transition support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Véase también