Manual de pseudoelementos CSS

Elementos pseudo de CSS

Los elementos pseudo de CSS se utilizan para establecer el estilo de partes específicas de los elementos.

Por ejemplo, se puede usar para:

  • Establece el estilo de la primera letra o la primera línea del elemento.
  • Inserta contenido antes o después del contenido del elemento.
  • Establece el estilo del marcador de elementos de lista.
  • Establece el estilo de la vista de fondo del diálogo.

La siguiente tabla muestra los diferentes elementos pseudo en CSS:

Elemento pseudo Ejemplo Descripción del ejemplo
::after p::after Inserta contenido después del contenido del elemento especificado.
::backdrop dialog::backdrop Establece el estilo de la vista de fondo del elemento de diálogo o popup.
::before p::before Inserta contenido antes del contenido del elemento especificado.
::file-selector-button ::file-selector-button Elije el botón para selector de archivo de tipo <input type="file">.
::first-letter p::first-letter Elije la primera letra de cada elemento <p>.
::first-line p::first-line Elije la primera línea de cada elemento <p>.
::grammar-error ::grammar-error Establece el estilo de texto para la marca de texto como erróneo en el navegador.
::highlight() ::highlight(custom-name) Elije el resaltado personalizado.
::marker ::marker Marca para seleccionar elementos de lista.
::placeholder input::placeholder Establece el estilo del texto de marcador de placeholder para los elementos <input> o <textarea>.
::selection ::selection Establece el estilo del texto seleccionado por el usuario.
::spelling-error ::spelling-error Establece el estilo de texto para la marca de texto como erróneo en el navegador.
::view-transition ::view-transition Representa la raíz de la superposición de transición de vista, que contiene todas las transiciones de vista en la página.
::view-transition-group ::view-transition-group Representa un grupo de capturas de vista de transición única.
::view-transition-image-pair ::view-transition-image-pair Contenedor de estados de vista 'vieja' y 'nueva' de transición de vista (antes y después de la transición).
::view-transition-new ::view-transition-new Estado de vista 'nuevo' que representa la transición de vista.
::view-transition-old ::view-transition-old Estado de vista 'viejo' que representa la transición de vista.