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

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 la numeración automática de un esquema.

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.

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

::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;
}

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

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

Navegadores compatibles

• (57)
• (79)
• (51)
• 10.1

Origen

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

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

::cue

Navegadores compatibles

• (26)
• (79)
• (55)
• (7)

Origen

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?

::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 seudoelementos se pueden encontrar en un archivo HTML.

Verdadero

Si bien las Herramientas para desarrolladores pueden mostrar pseudoelementos en el panel Elements, no se encontrarán en el HTML, ya que son propiedad del navegador.

Falso

Pueden segmentarse con CSS, pero no se encontrarán en el HTML.