::beforeIn ::afterpsevdo-elementi v CSS omogoča vstavljanje vsebine na strani, ne da bi morali biti v HTML. Čeprav končni rezultat dejansko ni v DOM-u, se na strani prikaže, kot da je, in bi bil v bistvu tak:
div::before ( content: "before"; ) div::after ( content: "after"; ) before after Edini razlogi za uporabo enega nad drugim so:
- Želite, da se ustvarjena vsebina nahaja pozicijsko pred vsebino elementa.
::afterVsebine je tudi »po« v izvorno vrstnem redu, tako da se bo položaj na vrhu :: prej, če zložene na vrhu med seboj naravno.
Upoštevajte, da je vsebina še vedno v elementu, na katerega so uporabljeni. Poimenovanje se zdi, kot da bi lahko prišlo, veste, pred ali za elementom, vendar je res pred ali za drugo vsebino znotraj.
Vrednost vsebine je lahko:
- Niz:
content: "a string";- posebne znake je treba posebej kodirati kot entiteto unicode. Glej stran glifov. - Slika: vsebina: url (/path/to/image.jpg.webp); - Slika je vstavljena v natančnih dimenzijah in je ni mogoče spremeniti. Ker so stvari, kot so gradienti, dejansko slike, je lahko psevdo element gradient.
- Nič: vsebina: “”; - Uporabno za jasne popravke in vstavljanje slik kot slik za ozadje (nastavite širino in višino ter lahko celo spremenite velikost z velikostjo ozadja).
- Števec:
content: counter(li);- Zelo uporaben za oblikovanje seznamov, dokler se ne prikaže oznaka.
Upoštevajte, da HTML-ja ne morete vstaviti (vsaj ta bo upodobljen kot HTML). content: "";
: vs ::
Vsak brskalnik, ki podpira dvojno dvopičje (: :) Sintaksa CSS3 podpira tudi samo sintakso (:), vendar IE 8 podpira samo enojno dvopičje, zato je za najboljšo podporo brskalnika za zdaj priporočljivo uporabiti samo dvopičje.
:: je novejša oblika, namenjena ločevanju psevdo vsebine od psevdoizbirnikov. Če ne potrebujete podpore za IE 8, lahko uporabite dvopičje.
Sorodno
- ::prva vrsta
- :: prva črka
- Izbirniki razreda psevdo
Podpora za brskalnik
Majhne težave:
- Firefox 3.5 - ne dovoljuje absolutnega pozicioniranja psevdo elementov.
- V Opera 9.2 je presledek znotraj tega psevdoelementa vedno prikazan kot
prebesedilo. - IE 8 zanje ne podpira z-indeksa
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1,3+ | 3,5+ | 6+ | 8+ | Ja | Ja |