Pseudoelementos en CSS

Cajas generadas antes y después del contenido, más las de texto y UI.

.tag::before {
  content: "#";
  opacity: 0.6;
}

.required::after {
  content: " *";
  color: #e5484d;
}

::selection {
  background: #7c5cff;
  color: #fff;
}

dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}

Cómo funciona

content es obligatorio para que ::before y ::after se rendericen.
El contenido generado decorativo debe quedar vacío para los lectores de pantalla.
::placeholder, ::selection y ::backdrop estilizan partes del navegador.

Palabras clave y builtins usados aquí

background
color
content
opacity
rgb

El intento, en números

Líneas: 18
Caracteres a escribir: 200
Tokens: 57
Ritmo de tres estrellas: 90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 38 segundos.

Escribe este fragmento

Paso 1 de 2 en Contenido generado; paso 19 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →