Elemento pseudo ::after de CSS

Definición y uso

CSS ::after Los elementos pseudo se utilizan para insertar contenido después del contenido de un elemento especificado.

Usar content El atributo especifica el contenido que se debe insertar. El valor de content puede ser:

• Cadena: content: "¡Hola mundo!";
• Imagen: content: url(myimage.jpg);
• Sin contenido: content: none;
• Contador: content: counter(li);
• Cita: content: close-quote;
• Valor del atributo: content: " (" attr(href) ")";

Consejo:Tenga en cuenta que el contenido insertado sigue siendo interno del elemento especificado. El contenido insertado se agregará después de otro contenido interno del elemento.

Usar ::before Inserta contenido antes del contenido de un elemento específico.

Ejemplo

Ejemplo 1

Inserta una cadena después del contenido de cada elemento <p>:

p::after {
  content: " - Recuerda esto";
}

Prueba por ti mismo

Ejemplo 2

Inserta una cadena después del contenido de cada elemento <p> y define el estilo del contenido insertado:

p::after {
  content: " - Recuerda esto";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Prueba por ti mismo

Sintaxis CSS

::after {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admite completamente este elemento pseudo.

Páginas relacionadas

Tutoriales:Elemento pseudo-CSS

Referencia:Elemento pseudo ::before de CSS