:: enne / :: pärast - CSS-trikid

::beforeJa ::afterpseudo-elemendid CSS võimaldab sisestada sisu peale lehele ilma et seda oleks vaja, et olla HTML. Kuigi lõpptulemus pole tegelikult DOM-is, ilmub see lehel justkui ja oleks põhimõtteliselt järgmine:

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

 before after

Ainsad põhjused üksteise kasutamiseks on:

Soovite, et loodud sisu oleks elemendi sisu ees positsiooniliselt.
::afterSisu on ka "pärast" lähte- järku, nii et see on seisukoht peal :: enne kui virnastatud üksteise loomulikult.

Pange tähele, et sisu on endiselt elemendis, millele seda rakendatakse. Nimetus tundub, et need võivad tulla, enne või pärast elementi, kuid see on tegelikult enne või pärast teist sees olevat sisu.

Sisu väärtus võib olla:

String: content: "a string"; - erimärgid tuleb spetsiaalselt kodeerida unicode'i üksusena. Vaadake tähestike lehte.
Pilt: sisu: url (/path/to/image.jpg.webp); - Pilt sisestatakse täpselt selle mõõtmetega ja selle suurust ei saa muuta. Kuna sellised asjad nagu gradientid on tegelikult pildid, võib pseudoelement olla gradient.
Miski: sisu: “”; - Kasulik selgete paranduste tegemiseks ja piltide lisamiseks taustapiltidena (seatud laius ja kõrgus ning isegi taustamõõduga suurust saab muuta).
Loendur: content: counter(li); - Tõesti kasulik loendite kujundamisel, kuni: marker tuleb.

Pange tähele, et te ei saa HTML-i sisestada (vähemalt see renderdatakse HTML-iga). content: "";

: vs ::

Iga brauser, mis toetab topeltkoolonit (: :) CSS3 süntaks, toetab ka lihtsalt (:) süntaksit, kuid IE 8 toetab ainult ühte koolonit, nii et praegu on brauseri parimaks toeks soovitatav kasutada ainult ühte koolonit.

:: on uuem formaat, mille eesmärk on eristada pseudosisu pseudovalijatest. Kui te ei vaja IE 8 tuge, kasutage julgelt kahekordset koolonit.

Seotud

::esimene rida
:: esimene täht
Pseudoklassi valijad

Brauseri tugi

Väikesed probleemid:

Firefox 3.5 - ei võimalda pseudoelementide absoluutset positsioneerimist.
Opera 9.2 versioonis kuvatakse tühik selles pseudoelemendis alati nagu pretekst.
IE 8 ei toeta nende z-indeksit