Pseudo de CSS-elements (pseudo-elementos)

Pseudo de CSS-Los pseudo-elementos elements es una palabra clave adicional al final del selector, que permite modificar el estilo de partes específicas del elemento seleccionado. Nota: en comparación con los pseudo-elementos, pseudo-Las clases (pseudo-clases) pueden cambiar el estilo de los elementos según su estado.

Los pseudo-elementos de CSS son una manera de estilizar elementos de documento que no están definidos claramente por su posición en el árbol del documento.

¿Qué es un pseudo-elemento

Los pseudo-elementos de CSS le permiten aplicar estilos a los elementos o partes de los elementos sin agregarles ningún ID o clase. Esto es muy útil en situaciones donde solo desea aplicar estilos a la primera letra del párrafo para crear un efecto de descenso de la primera letra, o donde desea insertar contenido antes o después del elemento mediante una hoja de estilo, etc.

CSS3 Se ha introducido una nueva sintaxis de doble dos puntos (::) para los pseudo-elementos para distinguirlos de las pseudo-clases. La nueva sintaxis de los pseudo-elementos se puede proporcionar de la siguiente manera：

Estos son los pseudo-elementos más comunes:

::first-pseudo-elemento line de la primera línea

El ::first-El pseudo-elemento line aplica estilos especiales al primer renglón de texto.

En el siguiente ejemplo, las reglas de estilo configuran el formato del primer renglón de texto en el párrafo. La longitud del primer renglón depende del tamaño de la ventana del navegador o del elemento que lo contiene.

p::first-line {
　　　　color: #ff0000;
　　　　fuente-variant: small-caps;
}

:: first-pseudo-elemento letter

::first-El pseudo-elemento letter se utiliza para agregar estilos especiales a la primera letra de la primera línea de texto. En el siguiente ejemplo, las reglas de estilo se configuran para formatear la primera letra del párrafo de texto y crear un efecto de descenso de la primera letra.

p::first-letra　{
　　　　color: #ff0000;
　　　　fuente-tamaño:　xx-large;
}

:: before y :: after pseudoelementos

::before y ::after pseudoelementos se pueden usar para insertar contenido generado antes o después del contenido de un elemento. content Cuando se combinan con propiedades de CSS, se inserta el contenido generado.

Esto es muy útil para decorar elementos ricos en contenido, que no deben pertenecer a la marca real de la página. Puede usar estos pseudoelementos para insertar cadenas de texto normales o insertar objetos (por ejemplo, imágenes) y otros recursos.

h1::before　{
　　　　content:　url("images/marcador-left.gif");
}
h1::after　{
　　　　content:　url("images/marcador-right.gif");
}

Pseudoelementos y clases de CSS

Por lo general, solo necesitamos usar estos pseudoelementos para establecer algún párrafo de texto u otroBloqueEstilo del elemento. Allí, declarar una clase a un pseudoelemento tiene efecto. Los pseudoelementos pueden combinarse conClase de CSSLa combinación para producir efectos, especialmente para los elementos que tienen esta clase.

Las reglas de estilo en los siguientes ejemplos mostrarán la primera letra de todos los párrafos con class="article", en verde, de tamaño xx-large。

p.article::first-letra　{
　　　　color:　#00ff00;
　　　　fuente-tamaño:　xx-large;
}