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


```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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `::before`
* `content`