:: før / :: etter - CSS-triks

Den ::beforeog ::afterpseudo-elementer i CSS lar deg sette inn innhold til en side uten at det trenger å være i HTML. Selv om sluttresultatet faktisk ikke er i DOM, ser det ut på siden som om det er, og vil egentlig være slik:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

De eneste grunnene til å bruke den ene over den andre er:

Du vil at det genererte innholdet skal komme før elementets innhold, posisjonelt.
Den ::afterinnhold er også “etter” i kilde rekkefølge, slik at det vil posisjonere oppå :: før hvis stablet oppå hverandre naturlig.

Merk at innholdet fortsatt er inne i elementet de brukes på. Navngivningen føles som om de kan komme, vet du, før eller etter elementet, men det er egentlig før eller etter det andre innholdet inni.

Verdien for innholdet kan være:

En streng: content: "a string"; - spesialtegn må kodes spesielt som en unicode-enhet. Se tegnesiden.
Et bilde: innhold: url (/path/to/image.jpg.webp); - Bildet settes inn i nøyaktige dimensjoner og kan ikke endres. Siden ting som gradienter faktisk er bilder, kan et pseudo-element være en gradient.
Ingenting: innhold: “”; - Nyttig for clearfix og å sette inn bilder som bakgrunnsbilder (angi bredde og høyde, og kan til og med endre størrelse med bakgrunnsstørrelse).
En teller: content: counter(li); - Virkelig nyttig for stylinglister til: markør kommer.

Merk at du ikke kan sette inn HTML (i det minste blir det gjengitt som HTML). content: "";

: vs ::

Hver nettleser som støtter dobbelt kolon (: :) CSS3 syntaks støtter også bare (:) syntaks, men IE 8 støtter bare enkelt kolon, så foreløpig anbefales det å bare bruke enkelt kolon for best nettleserstøtte.

:: er det nyere formatet ment å skille pseudoinnhold fra pseudovalgere. Hvis du ikke trenger IE 8-støtte, kan du gjerne bruke dobbelt kolon.

I slekt

::første linje
::første bokstav
Pseudo klassevalg

Nettleserstøtte

Små problemer:

Firefox 3.5- tillater ikke absolutt posisjonering av pseudo-elementer.
I Opera 9.2 vises alltid mellomrom i dette pseudo-elementet som om det er pretekst.
IE 8 støtter ikke z-indeks på dem