:: prieš / :: po - CSS-gudrybės

::beforeIr ::afterpseudo-elementai CSS leidžia jums įrašyti turinį į puslapį kurio nereikia būti HTML. Nors galutinio rezultato iš tikrųjų nėra DOM, jis puslapyje rodomas taip, lyg būtų, ir iš esmės būtų toks:

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

 before after

Vienintelės priežastys naudoti viena kitą yra:

Norite, kad sugeneruotas turinys būtų rodomas prieš elemento turinį poziciškai.
::afterTurinys taip pat yra "po žodžių" šaltinio tvarka, todėl ji bus poziciją viršuje :: Prieš jeigu sukrauti vienas ant kito natūraliai.

Atminkite, kad turinys vis dar yra elemento, kuriam jis taikomas, viduje. Pavadinimo rūšis atrodo, kad jie gali atsirasti, prieš, po elemento ar po jo, bet iš tikrųjų tai yra prieš arba po kito turinio viduje.

Turinio vertė gali būti:

Eilutė: content: "a string"; - specialieji simboliai turi būti specialiai užkoduoti kaip „unicode“ esmė. Žr. Glafų puslapį.
Vaizdas: content: url (/path/to/image.jpg.webp); - Vaizdas įterpiamas tiksliais matmenimis ir jo dydis negali būti pakeistas. Kadangi tokie dalykai kaip gradientai iš tikrųjų yra vaizdai, pseudo elementas gali būti gradientas.
Nieko: turinys: „“; - Naudinga išvalyti ir įterpti vaizdus kaip fono paveikslėlius (nustatyti plotį ir aukštį ir netgi pakeisti dydį su fono dydžiu).
Skaitiklis: content: counter(li); - Tikrai naudinga stiliaus sąrašuose, kol pasirodys: žymeklis.

Atminkite, kad negalite įterpti HTML (bent jau tai bus atvaizduojama kaip HTML). content: "";

: vs ::

Kiekviena naršyklė, palaikanti dvigubą dvitaškį (: :) CSS3 sintaksė, taip pat palaiko tik (:) sintaksę, bet IE 8 palaiko tik vieną dvitaškį, todėl kol kas rekomenduojama tiesiog naudoti vieną dvitaškį, kad būtų palaikoma geriausia naršyklė.

:: yra naujesnis formatas, skirtas pseudo turiniui atskirti nuo pseudo selektorių. Jei jums nereikia IE 8 palaikymo, drąsiai naudokite dvigubą dvitaškį.