Mientras desarrollan un sitio web, los desarrolladores web a menudo se encuentran en situaciones en las que es necesario diseñar una parte determinada de un elemento o agregar cierto contenido antes o después de un elemento particular. Todas estas tareas se pueden realizar utilizando pseudo-elementos proporcionados en CSS. Esta publicación te enseñará todo sobre los pseudoementos.

Pasará por los siguientes temas en esta publicación.

1. ¿Qué son los pseudo-elementos en CSS?
2. ::primera letra
3. ::primera linea
4. ::antes
5. ::después
6. ::selección

¿Qué son los pseudo-elementos en CSS?

Los pseudo-elementos son palabras clave que se utilizan para diseñar una parte particular de un elemento especificado. Estos se insertan en un selector cuando se diseñan elementos. Por ejemplo, desea dar algo de color a la primera letra de un elemento o desea agregar algún texto antes de cierto elemento.

Sintaxis

selector :: pseudo-elemento
El valor de la propiedad;

Aquí hemos destacado algunos de los pseudo-elementos importantes para su mejor comprensión.

::primera letra

Esto se usa para dar un cierto estilo a la primera letra de algún texto, además, se aplica solo en los elementos de nivel de bloque. Admite muchas propiedades CSS como color, fuente, margen, borde, relleno, fondo, etc.

Ejemplo

Siga el código a continuación para comprender cómo funciona este elemento.

Html

Pseudo-elementos

Aquí hemos definido un

elemento.

CSS

H1 :: Primera letra
Color: Sandybrown;
estilo de fuente: cursiva;
tamaño de fuente: 50px;

Estamos dando color de arena, estilo de fuente en cursiva y tamaño de fuente de 50 px al primer letra del encabezado usando el pseudo-elemento de primera letra ::.

Producción

La primera letra del encabezado se diseñó usando el pseudo-elemento ::.

::primera linea

Como su nombre indica, esto se usa para dar algo de estilo a la primera línea de un texto, además, es aplicable solo en elementos de nivel de bloque. Admite algunas propiedades CSS que son color, fuente, fondo, etc.

Ejemplo

Supongamos que desea dar algo de color, estilo y peso a la primera línea de un

elemento. Sigue el código a continuación.

Html

Como su nombre indica, este pseudo-elemento se usa para diseñar la primera línea de un texto. Este elemento también solo se puede aplicar a elementos de nivel de bloque. Admite algunas propiedades CSS que son color, fuente, fondo, etc.

En el código anterior hemos definido un

elemento y agregó algún texto en él.

CSS

P :: Primera línea
color morado;
estilo de fuente: cursiva;
Font-Weight: Bold;

Usando el pseudo-elemento de primera línea, estamos dando un poco de color, estilo de fuente y pesas para la primera línea del párrafo solo.

Producción

La primera línea del párrafo se diseñó con éxito.

::antes

Con el fin de agregar contenido antes de una determinada parte de un elemento, se usa el :: antes del pseudo-elemento. Admite la propiedad de contenido CSS.

Ejemplo

Supongamos que desea agregar comillas al comienzo de un párrafo. Use el siguiente código.

Html

Este es un párrafo.

Aquí estamos definiendo nuestro párrafo antes del cual todos agregamos una cita.

CSS

p :: antes
contenido: '"';
color azul;
tamaño de fuente: 25px;

En el código anterior, estamos agregando una cotización antes del párrafo y dándole el color azul, y estableciendo su tamaño en 25px usando el :: antes del pseudo elemento.

Producción

La cita se agregó con éxito usando el :: antes del pseudo-elemento.

::después

Esto funciona de manera similar al :: antes del pseudo-elemento, con la única diferencia que inserta contenido después de una cierta parte de un elemento. Este elemento también se usa con la propiedad de contenido CSS.

Ejemplo

Siga el ejemplo a continuación para comprender el funcionamiento del :: después del pseudo elemento.

Html

Hojas de estilo en cascada

Aquí hemos especificado un

elemento y agregó algo de contenido.

CSS

H1 :: después
Contenido: '(Pseudo-Elements)';
color azul;
tamaño de fuente: 15px;

Estamos agregando cierto contenido después del

elemento, dando ese contenido en particular color azul y establecer su tamaño de fuente en 15px.

Producción

El contenido se ha agregado después del encabezado.

::selección

Para peinar un elemento que selecciona un usuario, se utiliza el pseudo-elemento de selección ::. Admite algunas propiedades CSS que son color, fondo, etc.

Ejemplo

Supongamos que desea que se resalte un cierto elemento cuando un usuario lo selecciona. Sigue el código a continuación.

Html

Algunos encabezados

Aquí estamos especificando un encabezado.

CSS

H1 :: Selección
Color de fondo: hotpink;

En el código anterior, estamos utilizando el pseudoelemento :: Selection para darle al encabezado un color rosa cada vez que el usuario lo selecciona.

Producción

El pseudo-elemento de selección :: funciona correctamente.

Conclusión

Los pseudo-elementos son palabras clave que se utilizan para diseñar una parte particular de un elemento especificado. Hay varios pseudo-elementos en CSS, sin embargo, algunos de los pseudo-elementos más importantes y comúnmente utilizados son; ::primera letra, ::primera linea, ::antes, ::después, y ::selección. Cada uno de estos se utiliza para diferentes fines de estilo que se explica en detalle en esta publicación junto con la ayuda de ejemplos adecuados.