Seudoelementos

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

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