El pseudo-elemento CSS se utiliza para diseñar la parte de un elemento específico. Por ejemplo, se puede usar para insertar contenido antes o después del elemento o estilo la primera línea o letra del elemento. Para hacerlo, se usan los pseudo y después de los pseudo-elementos que entran en vigencia.

Este blog te instruirá sobre CSS "antes" y "después"Selectores. Pero antes de eso, discutiremos la sintaxis de los pseudo-elementos.

Cómo usar "pseudo-elemento" en CSS?

La sintaxis del pseudo elemento se menciona a continuación:

Selector :: pseudo-elemento
Propiedades CSS ..

Aquí:

• "Selector": Los elementos HTML que queremos estilo en CSS se eligen utilizando los selectores CSS. Estos selectores pueden ser selectores de identificación, selectores de elementos, selectores de clase o más.
• "Pseudo-elemento": El pseudo-elemento se utiliza para diseñar la parte de un elemento específico. Puede ser antes, después, primera línea, primera letra o más.
• "Propiedades CSS": Estas propiedades se pueden utilizar para diseñar el contenido adicional.

Ejemplo

El primer paso es crear un nuevo DIV con la clase "principal". Dentro de este elemento div, incluir

y

elementos para agregar algún contenido a la página web:

Hola Mundo!

Linuxhint es el mejor sitio web tutorial.

Únete a nuestra comunidad

Escribimos artículos y hacemos videos para educar al mundo en línea.

Estilo antes del elemento "H2"

h2 :: antes
contenido: "->";
color verde;

El "H2 :: antes"Se refiere a agregar estilo al elemento antes del elemento H2 con las siguientes propiedades:

• "contenido"La propiedad especifica el contenido que se inserta en el elemento.
• "colorLa propiedad se utiliza para establecer el color del texto del elemento.

Elemento de estilo "P"

.Principal P
tamaño de fuente: 20px;

El ".P principal"Se refiere al elemento P del Div principal. Su tamaño de fuente se establece en 20px utilizando el "tamaño de fuente" propiedad.

Aquí está el resultado del código anterior:

Como podemos ver, cada elemento H1 en el archivo HTML se especifica con el símbolo antes.

Aquí está la lista de contenido que se puede especificar en la propiedad de contenido:

• "Un descanso de línea": Para insertar un descanso de línea, use"\A" personaje
• "Nada": Se especifica como comas invertidas vacías y es útil al insertar imágenes de fondo.
• "Una imagen": Para insertar una imagen en la propiedad de contenido, especificamos la" URL "de la imagen.
• "Una cuerda": Los caracteres especiales deben codificarse como una entidad unicode.

Cómo agregar el elemento GIF "antes"?

También podemos agregar gifs o imágenes antes o después de los elementos. Mira el ejemplo de abajo.

Estilo antes del elemento "H1"

H1 :: antes
IMAGEN DE ANTECEDENTES: URL (/GIFS/SMILE.gif);
tamaño de fondo: 50px;
Background-Repeat: sin repetición;
Pantalla: bloque en línea;
Ancho: 50px;
Altura: 50px;
contenido: "";

El "H1 :: antes"Se refiere al estilo de inserción antes del elemento H1. Las siguientes propiedades se aplican al objeto insertado antes del elemento H1:

• "imagen de fondo"La propiedad especifica la URL del GIF.
• "tamaño de fondoLa propiedad se utiliza para especificar el tamaño de fondo. S
• "repetición"La propiedad define cómo se repiten las imágenes.
• "mostrar"Propiedad con el valor"bloqueo en línea"Permite especificar la altura y el ancho del elemento.
• "anchoLa propiedad establece el ancho del elemento HTML.
• "alturaLa propiedad establece la altura del elemento HTML.
• "contenidoLa propiedad se utiliza para insertar el contenido generado junto con los pseudo-selectores.

Estilo "principal" Div

.principal
Color de fondo: RGB (245, 245, 44);
relleno: 5px;

El ".principal"La clase del elemento Div tiene las propiedades enumeradas:

• "color de fondoSe utiliza la propiedad para especificar el color de fondo del elemento.
• "rellenoLa propiedad se utiliza para colocar el espacio a través del contenido de la T o dentro del borde.

Se puede observar que el GIF se coloca antes de cada elemento H1:

Cómo insertar símbolos "después" elementos específicos?

El pseudo-selector "::después"Se utiliza para insertar contenido después del elemento. El siguiente ejemplo demuestra el pseudo-selector posterior.

Ejemplo

Crea un nuevo elemento divir con el "principal" clase. Dentro de este elemento, agregue

y

elementos para agregar algún contenido a la página web:

Html

Lenguaje de marcado de hipertexto

CSS

Hoja estilo cascada

Estilo después del elemento "H2"

h2 :: después
contenido: "*";
color rojo;
tamaño de fuente: 30px;

El "H2 :: después"Se refiere al después del elemento H2. A continuación se muestran las propiedades que se aplican:

• "contenido"La propiedad especifica el contenido que se inserta en el elemento.
• "colorLa propiedad se utiliza para definir el color de la fuente.
• "tamaño de fuenteLa propiedad se utiliza para la configuración del tamaño de fuente del elemento.

Elemento de estilo "P"

.Contente principal P
tamaño de fuente: 20px;

El tamaño de fuente del elemento P del DIV principal-contenido se especifica utilizando el "tamaño de fuente" propiedad.

La salida del fragmento de código anterior se muestra a continuación:

Hemos aprendido con éxito sobre CSS antes y después de los selectores en CSS.

Conclusión

En CSS, los pseudo-elementos se utilizan para especificar algunas propiedades de estilo a la parte de un elemento. Por ejemplo, el "::antes" y "::despuésLos elementos especificados se utilizan para agregar el estilo antes y después del elemento deseado, respectivamente. Este blog ha demostrado el uso de CSS antes y después de los selectores.