Pseudoelemento ::before de CSS
El pseudoelemento ::before es un elemento de contenido generado que inserta cualquier tipo de contenido antes del contenido de un elemento. Se puede utilizar para insertar caracteres, cadenas de texto e imágenes. El valor se define mediante la propiedad content.
Por defecto, el pseudoelemento ::before es en línea.
Este pseudoelemento se puede animar, posicionar o flotar como cualquier otro contenido.
El pseudoelemento ::before también se puede utilizar con la notación de dos puntos :before, que es compatible con todos los navegadores.
El pseudoelemento ::after añade contenido después de cualquier otro contenido, mientras que el pseudoelemento ::before añade contenido antes 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 ::before de CSS
::before {
css declarations;
}Ejemplo del pseudoelemento ::before:
Ser o no ser|Ejemplo del pseudoelemento ::before de CSS|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: " William Shakespeare -";
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>En el siguiente ejemplo, el usuario puede agregar estilos al contenido.
Ejemplo del pseudoelemento ::before con contenido estilizado:
William SHakespeare|Ejemplo del pseudoelemento ::before de CSS|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "William Shakespeare-";
display: inline-block;
background-color: #ccc;
color: #666;
border: 2px dotted #000;
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>note
Para pseudoelementos puramente decorativos, establece siempre
content: ''para garantizar que se rendericen correctamente en todos los navegadores.
Práctica
¿Qué hace el pseudoelemento '::before' en CSS?