CSS Pseudo-elementos
Los pseudo-elementos CSS son un tipo especial de selector que puede aplicar estilos a partes específicas de los elementos de la página sin cambiar la estructura HTML.
Los pseudo-elementos CSS se utilizan para añadir efectos especiales a algunos selectores.
Los pseudo-elementos CSS más comunes son ::before, ::after, ::first-line, ::first-letter, etc.
Sintaxis
La sintaxis de los pseudo-elementos:
selector::pseudo-element {
property: value;
}
Las clases CSS también pueden usar pseudo-elementos:
selector.class::pseudo-element {
property: value;
}
Pseudo-elemento :first-line
El pseudo-elemento "first-line" se utiliza para aplicar un estilo especial a la primera línea del texto.
En el siguiente ejemplo, el navegador formateará la primera línea de texto del elemento <p> según el estilo del pseudo-elemento "first-line":
Nota:El pseudo-elemento "first-line" solo se puede usar en elementos de bloque.
Nota:Las siguientes propiedades se pueden aplicar al pseudo-elemento "first-line":
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Pseudo-elemento :first-letter
El pseudo-elemento "first-letter" se utiliza para aplicar un estilo especial a la primera letra del texto:
Nota:El pseudo-elemento "first-letter" solo se puede usar en elementos de bloque.
Nota:Las siguientes propiedades se pueden aplicar al pseudo-elemento "first-letter":
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Pseudo-elementos y clases CSS
Los pseudo-elementos se pueden combinar con clases CSS:
p.article:first-letter {color:#FF0000;}
<p class="article">文章段落</p>
El ejemplo anterior hará que la primera letra de todos los párrafos con class="article" se vuelva roja.
Múltiples pseudo-elementos
Se pueden combinar varios pseudo-elementos.
En el siguiente ejemplo, la primera letra del párrafo se mostrará en rojo con un tamaño de fuente xx-large. El resto del texto en la primera línea será azul y se mostrará en versalitas.
El resto del texto del párrafo se mostrará con el tamaño de fuente y color predeterminados:
Ejemplo
Pruébalo »
CSS - Pseudo-elemento :before
El pseudo-elemento ":before" puede insertar contenido nuevo antes del contenido de un elemento.
El siguiente ejemplo inserta una imagen antes de cada elemento <h1>:
CSS - Pseudo-elemento :after
El pseudo-elemento ":after" puede insertar contenido nuevo después del contenido de un elemento.
El siguiente ejemplo inserta una imagen después de cada elemento <h1>:
Todas las pseudoclases/pseudo-elementos de CSS
| Selector | Ejemplo | Descripción del ejemplo |
|---|---|---|
| :link | a:link | Selecciona todos los enlaces no visitados |
| :visited | a:visited | Selecciona todos los enlaces visitados |
| :active | a:active | Selecciona el enlace activo |
| :hover | a:hover | Estado al pasar el ratón sobre el enlace |
| :focus | input:focus | Selecciona el elemento que tiene el foco después de la entrada |
| :first-letter | p:first-letter | Selecciona la primera letra de cada elemento <p> |
| :first-line | p:first-line | Selecciona la primera línea de cada elemento <p> |
| :first-child | p:first-child | El selector selecciona los elementos <p> que son el primer hijo de cualquier elemento |
| :before | p:before | Inserta contenido antes de cada elemento <p> |
| :after | p:after | Inserta contenido después de cada elemento <p> |
| :lang(language) | p:lang(it) | Selecciona un valor inicial del atributo lang de los elementos <p> |