CSS álelemek - A választók előtt és után megmagyarázva

Selector előtt

A CSS ::beforeválasztóval be lehet illeszteni tartalmat a kiválasztott elem vagy elemek tartalma elé. Az ::beforeelemhez való csatolással használják.

Nézzünk meg néhány példát:

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.

A fenti példában csillagot és szóközt készítünk az oldal minden bekezdéseleme elé. Ezenkívül kék színnel előkészítjük a "Comment:" -t spanaz osztály minden eleme előtt comment.

Kiválasztó után

A CSS ::afterválasztóval tartalom illeszthető be a kiválasztott elem vagy elemek tartalma után. Úgy használják, hogy csatolja ::afterazt az elemet, amelyen használni kívánja.

Íme néhány példa:

.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.

A fenti példában kék színnel csatoljuk a "- Buzz Lightyear" -t az osztályhoz tartozó elemhez buzz. Ezenkívül zöld színnel hozzáfűzzük a "- Yoda" szót az osztályhoz tartozó elemhez yoda.

Egy- és kettõspont

Van egy kis vita az ál-elemek használatának helyes módjáról - a régi stílusú egy-kettőspont ( :before), amelyet az 1. és 2. CSS specifikációban használnak, szemben a CSS3 ajánlással, kettős kettőspont ( ::before), főleg azért, hogy „megkülönböztetést hozzanak létre a álosztályok és álelemek ” .

De kompatibilitási okokból továbbra is elfogadott az egy-kettőspontos módszer. Ne feledje, hogy az IE8 csak az egybéles jelölést támogatja.

Több információ:

  • A CSS kézikönyv: praktikus útmutató a CSS-hez a fejlesztők számára
  • A legjobb CSS és CSS3 példák