Pseudo-elementer og typed attr()

Pseudo-elementer som visuelle lag

::before og ::after opretter CSS-genererede bokse før eller efter et elements indhold. De er ikke ekstra elementer i HTML. Normalt skal de have content for at blive vist; content: "" er nok til et dekorativt lag.

En separator mellem listepunkter kan følge strukturen, uden at JavaScript tilføjer skråstreger til teksten:

li + li::before {
  content: "/";
  margin-inline: 0.5em;
}

Forudsig → afprøv → forklar: Hvilke punkter matcher li + li? Tilføj et punkt, og fjern det første. Hvorfor undgår vi en separator foran det første punkt?

Dekoration bag et billede

I temaopgaven kan et pseudo-element være en forskudt flade bag et billede. Forælderen etablerer placering og en lokal stacking context:

figure {
  position: relative;
  isolation: isolate;
}
figure::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 1rem 1rem;
  background: gold;
  z-index: -1;
  pointer-events: none;
}

position: relative giver laget en reference. isolation: isolate holder det negative lag lokalt, så det ikke forsvinder bag en fjern forælders baggrund.

Du kan også genbesøge pseudo-baggrunde i Defensive CSS. Pseudo-elementer kan formidle tekst, men vigtig information bør ikke kun eksistere som CSS-genereret indhold.

Fra streng til datatype

attr() læser en attribut på det element, hvor udtrykket bruges. Uden en type er værdien tekst, fx til content. Med en type kan den bruges som en CSS-værdi:

[data-color]::after {
  content: attr(data-color);
}
[data-color] {
  color: attr(data-color type(<color>), #222);
}

Den første regel viser teksten “red”; den anden fortolker den som en farve. Fallbacken #222 bruges, hvis attributten mangler eller ikke kan læses som den angivne type.

En enhed som % sættes på et tal; en type som <length> forventer, at attributten allerede indeholder en længde med enhed.

Data i HTML, udtryk i CSS

I stedet for særskilte :nth-child()-regler kan hver søjle bære sin værdi:

<div class="bar" data-percent="70"></div>

.bar {
  --percent: attr(data-percent %, 0%);
  block-size: var(--percent);
  background: color-mix(in oklab, #3980dd var(--percent), #dae9fc);
}

JavaScript kan ændre bar.dataset.percent; CSS bestemmer præsentationen. Definér den attributbaserede custom property på elementet, der har attributten, og lad dets børn/børnebørn arve værdien.

Typed attr() og almindelig attr() i content har forskellig browserunderstøttelse. Fallback-argumentet håndterer en manglende eller ugyldig attribut; det implementerer ikke funktionen i en browser uden understøttelse. Bevar derfor data som tekst, og brug om nødvendigt @supports til det ekstra grafiske lag.

MDN: attr() og browserunderstøttelse.