:: pirms / :: pēc - CSS-triki

::beforeUn ::afterpseido-elementu CSS ļauj ievietot saturu uz lapas nav nepieciešamības būt HTML. Lai gan gala rezultāts faktiski nav DOM, tas lapā parādās tā, it kā tas būtu, un būtībā būtu šāds:

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

 before after

Vienīgie iemesli, kāpēc izmantot vienu virs otra, ir:

Jūs vēlaties, lai ģenerētais saturs būtu pozicionēts pirms elementa satura.
::afterSaturs ir arī "pēc" source pasūtījuma, tāpēc tas būs novietot virs :: agrāk, ja novietots virs otra dabiski.

Ņemiet vērā, ka saturs joprojām atrodas elementā, uz kuru tas tiek lietots. Nosaukšanas veids šķiet, ka tie varētu nākt, jūs zināt, pirms vai pēc elementa, bet tas tiešām ir pirms vai pēc cita iekšējā satura.

Satura vērtība var būt:

Virkne: content: "a string"; - īpašās rakstzīmes ir īpaši jākodē kā unikoda entītija. Skatiet zīmju lapu.
Attēls: saturs: url (/path/to/image.jpg.webp); - Attēls tiek ievietots precīzos izmēros, un to nevar mainīt. Tā kā tādas lietas kā gradienti faktiski ir attēli, pseido elements var būt gradients.
Nekas: saturs: “”; - Noderīgs, lai veiktu attīrīšanu un attēlu ievietošanu kā fona attēlus (iestatiet platumu un augstumu un pat var mainīt izmērus ar fona lielumu).
Skaitītājs: content: counter(li); - patiešām noderīgs, veidojot sarakstus, līdz parādās: marķieris.

Ņemiet vērā, ka HTML nevar ievietot (vismaz tas tiks atveidots kā HTML). content: "";

: vs ::

Katrs pārlūks, kas atbalsta divkāršo kolu (: :), CSS3 sintakse atbalsta tikai (:) sintaksi, bet IE 8 atbalsta tikai vienu kolu, tāpēc pagaidām ieteicams tikai izmantot vienu kolu, lai nodrošinātu vislabāko pārlūka atbalstu.

:: ir jaunāks formāts, kas paredzēts, lai atšķirtu pseido saturu no pseido-selektoriem. Ja jums nav nepieciešams IE 8 atbalsts, izmantojiet divkāršo kolu.

Saistīts

::pirmā līnija
:: pirmais burts
Pseido klases atlasītāji

Pārlūka atbalsts

Mazie jautājumi:

Firefox 3.5 - neļautu absolūti pozicionēt pseidoelementus.
Operā 9.2 atstarpe vienmēr tiek parādīta šajā pseidoelementā tā, it kā tas būtu preteksts.
IE 8 uz tiem neatbalsta z-indeksu