:: før / :: efter - CSS-tricks

De ::beforeog ::afterpseudo-elementer i CSS giver dig mulighed for at indsætte indhold på en side uden at det behøver at være i HTML. Mens slutresultatet faktisk ikke er i DOM, ser det ud på siden, som om det er, og ville i det væsentlige være sådan:

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

 before after

De eneste grunde til at bruge den ene over den anden er:

Du vil have, at det genererede indhold kommer inden elementets indhold, positionelt.
Det ::afterindholdet er også ”efter” i kilde-orden, så det vil positionere på toppen af :: før, hvis stablet oven på hinanden naturligt.

Bemærk, at indholdet stadig er inde i det element, de anvendes på. Navngivningen føles som om de måske kommer, du ved, før eller efter elementet, men det er virkelig før eller efter det andet indhold indeni.

Værdien for indhold kan være:

En streng: content: "a string"; - specialtegn skal kodes specielt som en unicode-enhed. Se glyfsiden.
Et billede: indhold: url (/path/to/image.jpg.webp); - Billedet indsættes i dets nøjagtige dimensioner og kan ikke ændres. Da ting som gradienter faktisk er billeder, kan et pseudo-element være en gradient.
Intet: indhold: “”; - Nyttig til clearfix og indsættelse af billeder som baggrundsbilleder (indstil bredde og højde og kan endda ændre størrelse med baggrundsstørrelse).
En tæller: content: counter(li); - Virkelig nyttig til stylinglister, indtil: markøren følger med.

Bemærk, at du ikke kan indsætte HTML (i det mindste gengives det som HTML). content: "";

: vs ::

Hver browser, der understøtter dobbelt kolon (: :) CSS3-syntaks, understøtter også kun (:) syntaks, men IE 8 understøtter kun enkeltkolonet, så indtil videre anbefales det bare at bruge enkeltkolonet for den bedste browsersupport.

:: er det nyere format beregnet til at skelne mellem pseudoindhold og pseudovælgere. Hvis du ikke har brug for IE 8-support, er du velkommen til at bruge dobbelt kolon.

Relaterede

::første linje
:: første bogstav
Pseudo klasse vælgere

Browsersupport

Små problemer:

Firefox 3.5- tillader ikke absolut positionering af pseudo-elementer.
I Opera 9.2 vises hvidt mellemrum altid inden for dette pseudo-element, som om det er pretekst.
IE 8 understøtter ikke z-indeks på dem