::before (:before)
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
En CSS, ::before crea un pseudoelemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad content. Este elemento se muestra en línea con el texto de forma predeterminada.
/* Añade un corazón antes de los enlaces */
a::before {
content: "♥";
}
Nota:
Los pseudoelementos generados por ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto, no aplica a elementos de reemplazo como los elementos <img>, o <br>.
Sintaxis
Error: could not find syntax for this itemNota:
CSS3 introdujo la notación ::before (con doble dos puntos) para diferenciar pseudo-clases con pseudo-elementos. Los navegadores aceptan :before, añadido en CSS2.
Ejemplos
Añadiendo comillas
Un ejemplo simple del uso del pseudoelemento ::before es el proporcionar comillas. Aquí, usamos ::before y ::after
HTML
<q>Some quotes</q>, he said, <q>are better than none</q>.
CSS
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
Resultado
Ejemplo decorativo
Podemos estilizar el texto o imágenes en la propiedad content de casi cualquier forma que queramos.
HTML
<span class="ribbon">Notice where the orange box is.</span>
CSS
.ribbon {
background-color: #5bc8f7;
}
.ribbon::before {
content: "Look at this orange box.";
background-color: #ffba10;
border-color: black;
border-style: dotted;
}
Resultado
Lista de tareas
En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.
HTML
<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>
CSS
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
}
li.done {
background: #ccff99;
}
li.done::before {
content: "";
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}
JavaScript
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("done");
}
},
false,
);
Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudoelemento ::before que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.
Resultado
Caracteres especiales
Como esto es CSS y no HTML, no se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra invertida seguida de un valor unicode hexadecimal.
HTML
<ol>
<li>Crack Eggs into bowl</li>
<li>Add Milk</li>
<li>Add Flour</li>
<li aria-current="step">Mix thoroughly into a smooth batter</li>
<li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
<li>Fry until the top of the pancake loses its gloss</li>
<li>Flip it over and fry for a couple more minutes</li>
<li>serve with your favorite topping</li>
</ol>
CSS
li {
padding: 0.5em;
}
li[aria-current="step"] {
font-weight: bold;
}
li[aria-current="step"]::after {
content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
display: inline;
}
Especificaciones
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # generated-content |
Compatibilidad con navegadores
Loading…