Seudoelementos

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 (como background-image)
• border propiedades (como border-color)
• float
• Propiedades de font (como font-size y font-weight)
• propiedades del texto (como text-decoration y word-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 propiedades
• font propiedades
• text 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 y transition

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 no background-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 propiedades
• font propiedades
• text 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