Podcast de CSS - 014: Pseudoelementos
Si tienes un artículo de contenido y quieres que la primera letra sea mucho más grande, ¿cómo lo logras?
En CSS,
puedes usar el seudoelemento ::first-letter
para lograr este tipo de detalle 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 o orientar un elemento adicional sin tener que agregar más HTML.
En esta solución de ejemplo, con ::first-letter
,
es uno de muchos seudoelementos.
Tienen una variedad de roles,
En esta lección, aprenderás qué seudoelementos están disponibles y cómo puedes usarlos.
::before
y ::after
Tanto el
::before
y
::after
los seudoelementos crean un elemento secundario dentro de un elemento solo si defines una propiedad content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
puede ser cualquier cadena
(incluso una vacía)
pero ten en cuenta que es probable que el lector de pantalla anuncie cualquier cosa que no sea una cadena vacía.
Puedes agregar una imagen url
para insertar una imagen con sus dimensiones originales
por lo que no podrás cambiar su tamaño.
También puedes insertar un
counter
Una vez que se crea un elemento ::before
o ::after
, haz lo siguiente:
puedes personalizarlo como quieras, 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 principio de la lección.
Tenga en cuenta que no todas las propiedades de CSS
se pueden utilizar al orientar los anuncios.
::first-letter
Las propiedades disponibles son las siguientes:
color
background
propiedades (comobackground-image
)border
propiedades (comoborder-color
)float
- Propiedades
font
(comofont-size
yfont-weight
) - propiedades de texto (como
text-decoration
yword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
La ::first-line
seudoelemento te permitirá dar estilo a la primera línea de texto
solo si el elemento con ::first-line
aplicado tiene un valor display
de block
,
inline-block
, list-item
, table-caption
o table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Como el seudoelemento ::first-letter
,
solo puedes usar un subconjunto de propiedades de CSS:
color
background
propiedadesfont
propiedadestext
propiedades
::backdrop
Si tienes un elemento que se presenta en modo de pantalla completa,
como <dialog>
o <video>
,
puedes darle estilo al fondo (el espacio entre el elemento y el resto de la página) con
Pseudoelemento ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
La ::marker
seudoelemento te permite aplicar diseño a la viñeta o al número de un elemento de la lista o a 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 usando la propiedad content
. Por ejemplo, puedes usar esta opción para establecer un símbolo más y menos para los estados cerrados y vacíos de un elemento <summary>
.
::selection
La ::selection
seudoelemento te permite darle estilo al 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 combinar 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 de 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
.
La ::placeholder
seudoelemento te permite darle estilo a ese texto.
input::placeholder {
color: darkcyan;
}
::placeholder
solo admite un subconjunto de reglas de CSS:
color
background
propiedadesfont
propiedadestext
propiedades
::cue
Por último, en este recorrido por los seudoelementos
Pseudoelemento ::cue
.
Esto te permite diseñar las indicaciones WebVTT,
que son las leyendas de un elemento <video>
.
También puedes pasar un selector a un ::cue
,
lo que te permite aplicar ajustes de estilo a elementos específicos dentro de un subtítulo.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los pseudoelementos
¿Cuáles de las siguientes opciones no son seudoelementos?
::first-paragraph
::before
:active
::pencil
::marker
::after
Los seudoelementos se pueden encontrar en un archivo HTML.