Pseudoelemento ::after en CSS
En CSS, ::after crea un pseudoelemento que es el último hijo del elemento seleccionado. Genera contenido que aparece después del contenido original del elemento. Se puede usar para insertar caracteres, cadenas de texto o imágenes.
El valor se define mediante la propiedad content.
Por defecto, el pseudoelemento ::after es en línea.
Se puede animar, posicionar o flotar como cualquier otro contenido.
El pseudoelemento ::after también se puede usar con la notación de un solo dos puntos :after, que es compatible con todos los navegadores.
El pseudoelemento ::before añade contenido antes que cualquier otro, mientras que el pseudoelemento ::after añade contenido después de cualquier otro contenido en HTML.
INFO
Los pseudoelementos creados con ::after y ::before no se aplican a elementos reemplazados (p. ej., <br>, <img>).
Versión
Sintaxis
Pseudoelemento ::after en CSS
::after {
css declarations;
}Ejemplo del pseudoelemento ::after:
Ejemplo de ::after en CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>En el siguiente ejemplo, se pueden agregar estilos al contenido.
Ejemplo del pseudoelemento ::after con contenido estilizado:
Ejemplo del pseudoelemento ::after con contenido estilizado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
background-color: #eee;
color: #1c87c9;
padding: 5px 3px;
border: 2px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>Práctica
¿Qué hace el pseudoelemento ::after en CSS?