Pseudo-elementos CSS
Un pseudo-elemento CSS sirve para dar estilo a una parte especifica del contenido de la etiqueta. Como por ejemplo, darle estilo a la primera letra, o a la primera linea, o insertar contenido antes o después del contenido de la etiqueta.
Sintaxis
selector::pseudo-elemento { propiedad: valor; }
Para los pseudo-elementos se utilizan dos puntos dobles a diferencia de las pseudo-clases con dos puntos únicos. Esta nueva notación fue agregada en el estándar CSS3 por parte del W3C para diferenciarlas de las pseudo-clases, dado que en CSS1 y CSS2 se utilizaban dos puntos para ambos. Por compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para los pseudo-elementos CSS2 y CSS1.
El pseudo-elemento ::first-line
El pseudo-elemento ::first-line
sirve para agregar un estilo especial a la primera línea de texto en una etiqueta con nivel de bloque.
El siguiente ejemplo, da formato a la primera línea de un texto en todas etiquetas <p>
:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Nota: El pseudo-elemento
::first-line
solo aplica a etiquetas de nivel de bloque.
Las siguientes propiedades que aplican al pseudo-elemento ::first-line son:
- Propiedades de fuentes (
font
). - Propiedades de color (
color
). - Propiedades de fondo (
background
). - Propiedades de espaciado de palabras (
word-spacing
). - Propiedades de decoración de texto (
text-decoration
). - Propiedades de alineamiento vertical (
vertical-align
). - Propiedades de trasformación de texto (
text-transform
). - Propiedades de altura de línea (
line-height
). - Propiedades para limpiar (
clear
).
El pseudo-elemento ::first-letter
El pseudo-elemento ::first-letter
sirve para agregar un estilo especial a la primera letra de un texto en una etiqueta con nivel de bloque.
El siguiente ejemplo, da formato a la primera letra el texto de todas las etiquetas <p>
:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Nota: El pseudo-elemento ::first-letter
solo aplica a etiquetas con nivel de bloque.
Las siguientes propiedades que aplican al pseudo-elemento ::first-letter
son:
- Propiedades de fuentes (
font
). - Propiedades de color (
color
). - Propiedades de fondo (
background
). - Propiedades de margen (
margin
). - Propiedades de relleno (
padding
). - Propiedades de bordes (
border
). - Propiedades de decoración de texto (
text-decoration
). - Propiedades de alineamiento vertical, pero solo si float: none; (
vertical-align
). - Propiedades de trasformación de texto (
text-transform
). - Propiedades de altura de línea (
line-height
). - Propiedades de flotamiento (
float
). - Propiedades para limpiar (
clear
).
Combinar pseudo-elementos y clases CSS
Los pseudo-elementos pueden ser combinados las clases CSS.
En el siguiente ejemplo, especifica que la primera letra del párrafo en rojo y un aumenta el tamaño:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Combinar pseudo-elementos CSS
Los pseudo-elementos pueden ser combinados.
En el siguiente ejemplo, la primera letra de los párrafos se especifica en rojo y un tamaño mayor, el resto de la primera línea se especifica en color azul y un tamaño menor y el resto del párrafo será del color y tamaño predeterminado.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}p:first-line {
color: #0000ff;
font-variant: small-caps;
}
El pseudo-elemento ::before
El pseudo-elemento ::before
sirve para insertar un contenido antes del contenido de una etiqueta.
El siguiente ejemplo, inserta una imagen antes del contenido de cada etiqueta <h1>
:
h1::before {
content: url(foto.jpg);
}
El pseudo-elemento ::after
El pseudo-elemento ::after
sirve para insertar un contenido después del contenido de una etiqueta.
El siguiente ejemplo, inserta una imagen después del contenido de cada etiqueta <h1>
:
h1::after {
content: url(foto.jpg);
}
El pseudo-elemento ::selection
El pseudo-elemento ::selection
aplica una porción de contenido que es seleccionado por el usuario.
Las siguientes propiedades aplican al pseudo-elemento ::selection
:
color
background
cursor
outline
El siguiente ejemplo, especifica el texto seleccionado en color rojo y fondo amarillo:
::selection {
color: red;
background: yellow;
}
Los pseudo-elementos CSS
Selector | Ejemplo | Descripción |
---|---|---|
::after |
p::after |
Inserta contenido después del contenido de cada etiqueta <p>. |
::before | p::before |
Inserta contenido antes del contenido de cada etiqueta <p> . |
::first-letter |
p::first-letter |
Aplica para la primera letra de cada etiqueta <p> . |
::first-line |
p::first-line |
Aplica para la primera línea de cada etiqueta <p> . |
::selection |
p::selection |
Aplica a la porción de contenido seleccionada por el usuario. |