CSS-pseudoelementer - før og efter vælgerne forklaret

Før vælger

CSS- ::beforevælgeren kan bruges til at indsætte indhold før indholdet af det eller de valgte elementer. Det bruges ved at fastgøre ::beforedet element, det skal bruges på.

Lad os se på nogle 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 mellemrum før hvert afsnitelement på siden. Vi forudser også "Kommentar:" i blåt før hvert spanelement med klassen comment.

Efter vælger

CSS- ::aftervælgeren kan bruges til at indsætte indhold efter indholdet af det eller de valgte elementer. Det bruges ved at fastgøre ::afterdet element, det skal bruges på.

Her er nogle 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 tilføjer vi "- Buzz Lightyear" i blåt til elementet med klassen buzz. Vi tilføjer også "- Yoda" i grønt til elementet med klassen yoda.

Enkelt kolon vs. dobbelt kolon

Der er en smule diskussion om den rigtige måde at bruge pseudoelementer på - den gamle stil single-colon ( :before), brugt i CSS-specifikation 1 og 2, versus CSS3-anbefaling, double-colon ( ::before), hovedsagelig for at "etablere en diskrimination mellem pseudoklasser og pseudoelementer ” .

Men af ​​kompatibilitetsårsager accepteres enkeltkolonmetoden stadig. Husk, at IE8 kun understøtter notationen med en kolon.

Mere information:

  • CSS-håndbogen: en praktisk guide til CSS for udviklere
  • De bedste CSS-eksempler og CSS3-eksempler