El podcast de CSS (014: Pseudoelementos)
Si tienes un artículo de contenido y quieres que la primera letra sea un límite mucho más grande, ¿cómo puedes lograrlo?
En CSS, puedes usar el seudoelemento ::first-letter
para lograr este tipo de detalles de diseño.
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
Un seudoelemento es como agregar un elemento adicional o incluirlo en la segmentación sin tener que agregar más HTML.
Esta solución de ejemplo, mediante ::first-letter
, es uno de los tantos pseudoelementos.
Tienen una variedad de funciones y, en esta lección, aprenderás qué seudoelementos están disponibles y cómo puedes usarlos.
::before
y ::after
Los pseudoelementos ::before
y ::after
crean un elemento secundario dentro de un elemento solo si defines una propiedad content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
El content
puede ser cualquier cadena, incluso una vacía, pero ten en cuenta que es probable que un lector de pantalla anuncie cualquier cadena que no sea una vacía.
Puedes agregar una imagen url
, que insertará una imagen en sus dimensiones originales, por lo que no podrás cambiar el tamaño.
También puedes insertar un counter
.
Una vez que se crea un elemento ::before
o ::after
, puedes diseñarlo como desees, sin límites.
Solo puedes insertar un elemento ::before
o ::after
en un elemento que acepte elementos secundarios
(elementos con un árbol de documentos),
por lo que elementos como <img />
, <video>
y <input>
no funcionarán.
::first-letter
Conocimos este seudoelemento al comienzo de la lección.
Vale la pena tener en cuenta que no todas las propiedades de CSS se pueden usar cuando se orienta a ::first-letter
.
Las propiedades disponibles son las siguientes:
color
background
propiedades (comobackground-image
)border
propiedades (comoborder-color
)float
- Propiedades de
font
(comofont-size
yfont-weight
) - propiedades del texto (como
text-decoration
yword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
El seudoelemento ::first-line
te permitirá aplicar diseño a la primera línea de texto solo si el elemento en el que se aplicó ::first-line
tiene un valor display
de block
, inline-block
, list-item
, table-caption
o table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Al igual que el seudoelemento ::first-letter
, solo hay un subconjunto de propiedades de CSS que puedes usar:
color
background
propiedadesfont
propiedadestext
propiedades
::backdrop
Si tienes un elemento que se presenta en modo de pantalla completa, como <dialog>
o <video>
, puedes aplicar diseño al fondo (el espacio entre el elemento y el resto de la página) con el seudoelemento ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
El seudoelemento ::marker
te permite diseñar la viñeta o el número de un elemento de la lista o la flecha de un elemento <summary>
.
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
Solo se admite un pequeño subconjunto de propiedades de CSS para ::marker
:
color
content
white-space
font
propiedades- Propiedades
animation
ytransition
Puedes cambiar el símbolo del marcador con la propiedad content
. Puedes usarlo para establecer un símbolo de signo más y menos para los estados cerrado y vacío de un elemento <summary>
, por ejemplo.
::selection
El seudoelemento ::selection
te permite darle estilo a la apariencia del texto seleccionado.
::selection {
background: green;
color: white;
}
Este seudoelemento se puede usar para aplicar estilo a todo el texto seleccionado como en la demostración anterior. También se puede usar en combinación con otros selectores para lograr un estilo de selección más específico.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
Al igual que con otros seudoelementos, solo se permite un subconjunto de propiedades CSS:
color
background-color
, pero nobackground-image
text
propiedades
::placeholder
Puedes agregar una sugerencia auxiliar a los elementos del formulario, como <input>
con un atributo placeholder
.
El seudoelemento ::placeholder
te permite aplicar estilo a ese texto.
input::placeholder {
color: darkcyan;
}
::placeholder
solo admite un subconjunto de reglas CSS:
color
background
propiedadesfont
propiedadestext
propiedades
::cue
Al final de este recorrido por los pseudoelementos, está el ::cue
.
Esto te permite aplicar diseño a las señales de WebVTT, que son las leyendas de un elemento <video>
.
También puedes pasar un selector a un ::cue
, lo que te permite aplicar diseño a elementos específicos dentro de una leyenda.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los seudoelementos
¿Cuáles de los siguientes no son pseudoelementos?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Los seudoelementos están disponibles en un archivo HTML.