CSSPseudoelementos


Introducción

Los pseudo-elementos, al igual que las pseudo-clases, se agregan a los selectores de CSS, pero en lugar de describir un estado especial, le permiten ubicar y diseñar ciertas partes de un elemento html.

Por ejemplo, el :: pseudo-elemento de primera letra se dirige solo a la primera letra de un elemento de bloque especificado por el selector.

Sintaxis

  • selector :: pseudo-elemento {propiedad: valor}

Parámetros

pseudo-elemento Descripción
::after Insertar contenido después del contenido de un elemento.
::before Insertar contenido antes del contenido de un elemento.
::first-letter Selecciona la primera letra de cada elemento.
::first-line Selecciona la primera línea de cada elemento.
::selection Coincide con la parte de un elemento que es seleccionado por un usuario
::backdrop Se utiliza para crear un fondo que oculta el documento subyacente para un elemento en la pila de la capa superior
::placeholder Le permite aplicar estilo al texto del marcador de posición de un elemento de formulario (Experimental)
::marker Para aplicar atributos de estilo de lista en un elemento dado (Experimental)
::spelling-error Representa un segmento de texto que el navegador ha marcado como incorrectamente escrito (Experimental)
::grammar-error Representa un segmento de texto que el navegador ha marcado como gramaticalmente incorrecto (Experimental)

Observaciones

  • Usted verá a veces dos puntos dobles ( :: ) en lugar de sólo uno ( : ). Esta es una manera de separar pseudo-clases de pseudo-elementos, pero algunos navegadores antiguos como Internet Explorer 8 sólo es compatible con el colon solo ( : ) para los pseudo-elementos.

  • Uno puede usar solo un pseudo-elemento en un selector. Debe aparecer después de los selectores simples en la declaración.

  • Los pseudo-elementos no son parte del DOM, por lo tanto, no son direccionables por :hover u otros eventos de usuario.

Pseudoelementos Ejemplos relacionados