Seudoelementos

The CSS Podcast - 014: Pseudo-elements

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 pseudoelemento ::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 pseudoelemento es como agregar o segmentar un elemento adicional sin tener que agregar más código HTML. Esta solución de ejemplo, que usa ::first-letter, es uno de muchos pseudoelementos. Tienen una variedad de roles y, en esta lección, aprenderás qué pseudoelementos están disponibles y cómo puedes usarlos.

::before y ::after

Los seudoelementos ::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: "";
}

content puede ser cualquier cadena, incluso una vacía, pero ten en cuenta que es probable que un lector de pantalla anuncie cualquier cosa que no sea una cadena vacía. Puedes agregar una imagen url, que insertará una imagen con sus dimensiones originales, por lo que no podrás cambiar su tamaño. También puedes insertar un counter.

Término clave: Puedes crear un contador con nombre y, luego, incrementarlo según su posición en el flujo del documento. Hay todo tipo de contextos en los que pueden ser muy útiles, como numerar automáticamente un esquema.

Una vez que se crea un elemento ::before o ::after, puedes aplicarle el estilo que 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.

: input[type="checkbox"] es una excepción. Se permite tener elementos secundarios de pseudoelementos.

::first-letter

Conocimos este pseudoelemento al comienzo de la lección. Ten en cuenta que no todas las propiedades de CSS se pueden usar cuando se segmenta para ::first-letter. Las propiedades disponibles son las siguientes:

• color
• Propiedades background (como background-image)
• Propiedades border (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;
}

Nota: Solo puedes usar :first-letter en contenedores de bloques. Por lo tanto, no funcionará si intentas agregarlo a un elemento que tenga display: inline.

::first-line

El pseudoelemento ::first-line te permitirá aplicar diseño 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;
}

Al igual que con el pseudoelemento ::first-letter, solo puedes usar un subconjunto de propiedades CSS:

• color
• background propiedades
• font propiedades
• text propiedades

::backdrop

Si tienes un elemento que se presenta en el modo de pantalla completa, como un <dialog> o un <video>, puedes aplicarle diseño al fondo (el espacio entre el elemento y el resto de la página) con el pseudoelemento ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

El pseudoelemento ::marker te permite aplicar diseño a la viñeta o al número de un elemento de 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 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 usar esto para establecer un símbolo más y menos para los estados cerrado y vacío de un elemento <summary>, por ejemplo.

::selection

El pseudoelemento ::selection te permite aplicar diseño al aspecto del texto seleccionado.

::selection {
  background: green;
  color: white;
}

Este pseudoelemento se puede usar para aplicar diseño 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

Browser Support

• 57
• 79
• 51
• 10.1

Source

Puedes agregar una sugerencia de ayuda a los elementos de formulario, como <input> con un atributo placeholder. El pseudoelemento ::placeholder te permite aplicarle un estilo a ese texto.

input::placeholder {
  color: darkcyan;
}

::placeholder solo admite un subconjunto de reglas de CSS:

• color
• background propiedades
• font propiedades
• text propiedades

Nota: Un placeholder no es <label> y no debe usarse en lugar de un <label>. Los elementos de formulario deben estar etiquetados, de lo contrario, no se podrá acceder a ellos.

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

El último en este recorrido por los pseudoelementos es el ::cue. Esto te permite aplicar diseño a los indicadores WebVTT, que son los subtítulos 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 tu comprensión

Pon a prueba tus conocimientos sobre los pseudoelementos

¿Cuáles de las siguientes opciones no son pseudoelementos?

::before

No olvides agregar content: '';.

::first-paragraph

Esto no existe en CSS.

::after

No olvides agregar content: '';.

::marker

Este es el elemento de viñeta cuando usas un elemento de lista o un tipo de visualización.

::pencil

Esto no existe en CSS.

:active

Esta es una pseudoclase, no un pseudoelemento.

Los pseudoelementos se pueden encontrar en un archivo HTML.

Verdadero

Si bien DevTools puede mostrar pseudoelementos en el panel Elementos, no se encontrarán en el código HTML, ya que son propiedad del navegador.

Falso

Se pueden segmentar con CSS, pero no se encontrarán en el HTML.