CSS Pseudo-Elements - Før og etter velgere forklart

Før velgeren

CSS- ::beforevelgeren kan brukes til å sette inn innhold før innholdet i det eller de valgte elementene. Den brukes ved å feste ::beforetil elementet den skal brukes på.

La oss se på noen eksempler:

p::before { content: "* "; } span.comment::before { content: "Comment: "; color: blue; }

 To infinity, and beyond!
 I am Buzz Lightyear. I come in peace.
 May the force be with you.
Do. Or do not. There is no try.

I eksemplet ovenfor forbereder vi en stjerne og et mellomrom før hvert avsnittselement på siden. Vi forbereder også "Kommentar:" i blått før hvert spanelement med klassen comment.

Etter Selector

CSS- ::aftervelgeren kan brukes til å sette inn innhold etter innholdet i det valgte elementet. Den brukes ved å feste ::aftertil elementet den skal brukes på.

Her er noen eksempler:

.buzz::after { content: " - Buzz Lightyear"; color: blue; } .yoda::after { content: " - Yoda"; color: green; }

 To infinity, and beyond!
 Do. Or do not. There is no try.

I eksemplet ovenfor legger vi "- Buzz Lightyear" i blått til elementet sammen med klassen buzz. Vi legger også "- Yoda" i grønt til elementet sammen med klassen yoda.

Enkelt kolon vs. Dobbelt kolon

Det er litt diskusjon om den riktige måten å bruke pseudo-elementer på - den gamle stilen single-colon ( :before), brukt i CSS spesifikasjoner 1 og 2, versus CSS3-anbefaling, double-colon ( ::before), hovedsakelig for å "etablere en diskriminering mellom pseudoklasser og pseudoelementer ” .

Men av kompatibilitetsmessige grunner aksepteres fremdeles metoden med en kolon. Husk at IE8 støtter bare kolon-notasjonen.

Mer informasjon:

• CSS-håndboken: en praktisk guide til CSS for utviklere
• De beste CSS-eksemplene og CSS3-eksemplene