El ::before Selector en HTML

1. CSS ::before Pseudo-Elemento
2. Use ::before para agregar contenido antes de un elemento en HTML

Este artículo presentará el pseudo-elemento CSS ::before y explorará su aplicación en HTML.

CSS ::before Pseudo-Elemento

El selector ::before es un pseudo-elemento CSS que podemos utilizar para insertar contenido antes de un elemento seleccionado o varios elementos. Está en línea por defecto.

La propiedad content a menudo viene con el selector ::before. La propiedad le permite agregar el contenido en la ubicación especificada por el selector ::before.

Con estas propiedades, puede agregar contenido en la ubicación que desee en un documento HTML sin realizar ningún cambio en el código HTML. Puede aplicar los estilos CSS al contenido agregado en el cuerpo del selector.

La sintaxis para el selector ::before se muestra a continuación:

selector::before{
    /*Css Properties*/
}

Por ejemplo, si desea agregar algún contenido antes de un párrafo, debe escribirlo de la siguiente manera.

p::before{
    /*Css Properties*/
}

Suponga que ha escrito un párrafo en HTML pero no ha visto el encabezado. En tales condiciones, puede usar el pseudoelemento ::before para agregar el encabezado antes del párrafo.

Puede escribir el encabezado usando la propiedad contenido y agregar los estilos.

En este último apartado, prácticamente podrás utilizar el pseudoelemento ::before.

Use ::before para agregar contenido antes de un elemento en HTML

Veamos un ejemplo de cómo usar ::before para agregar contenido antes de un elemento.

Por ejemplo, cree un contenedor div1. Luego crea una lista ordenada usando <ol> con tres elementos dentro.

Escriba algunos elementos aleatorios de su elección usando la etiqueta <li>.

Código de ejemplo:

<div class = "div1">
    <ol>
        <li>Point One</li>
        <li>Point Two</li>
        <li>Point Three </li>
    </ol>
</div>

La salida es bastante predecible. Es una lista ordenada que contiene tres elementos.

Ahora agregará algunos elementos antes de la lista sin cambiar el documento HTML.

En CSS, cree un selector utilizando el pseudoelemento ::before con div1 como .div1::before. En el cuerpo del selector, usa la propiedad content y escribe cualquier contenido arbitrario para su valor.

Consideremos una línea de asteriscos como el contenido.

A continuación, agreguemos algo delante de cada elemento de la lista. Debes seleccionar el elemento li y utilizar el pseudo-elemento ::before.

Seleccione el elemento como .div1 li::before y use la propiedad content para agregar '\2192' como su valor. El valor '\2192' es el número de entidad para una flecha hacia la derecha.

.div1::before{
    content:'*************************';
    background: yellow;
}
.div1 li::before{
    content: '\2192';
}

Observa como se forma una línea de asteriscos (*) antes del contenido de div1, antes de la lista. Además, antes de cada punto de la lista ordenada, insertamos una flecha hacia la derecha.

Así es como se comporta el pseudo-elemento ::before junto con la propiedad content en CSS.