:: înainte / :: după - CSS-Tricks

::beforeȘi ::afterpseudo-elementele CSS vă permite să inserați conținut pe o pagină fără a fi nevoie să fie în HTML. Deși rezultatul final nu este de fapt în DOM, acesta apare pe pagină ca și cum ar fi, și ar fi în esență așa:

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

 before after

Singurele motive pentru a utiliza unul peste altul sunt:

Doriți ca conținutul generat să fie înaintea conținutului elementului, pozițional.
::afterConținutul este , de asemenea , „după“ în sursa de -ordine, astfel încât acesta va poziționa pe partea de sus a :: înainte , dacă stivuite unul peste altul în mod natural.

Rețineți că conținutul este încă în interiorul elementului la care sunt aplicate. Un fel de denumire pare să vină, știi, înainte sau după element, dar este chiar înainte sau după celălalt conținut din interior.

Valoarea pentru conținut poate fi:

Un șir: content: "a string"; - caracterele speciale trebuie să fie codificate special ca entitate unicode. Vezi pagina glifelor.
O imagine: content: url (/path/to/image.jpg.webp); - Imaginea este inserată la dimensiunile exacte și nu poate fi redimensionată. Deoarece lucrurile precum gradientele sunt de fapt imagini, un pseudoelement poate fi un gradient.
Nimic: conținut: „”; - Util pentru clarificare și inserarea imaginilor ca imagini de fundal (setați lățimea și înălțimea și poate chiar redimensiona cu dimensiunea fundalului).
Un contor: content: counter(li); - Foarte util pentru stilarea listelor până când apare markerul.

Rețineți că nu puteți insera HTML (cel puțin, acesta va fi redat ca HTML). content: "";

: vs ::

Fiecare browser care acceptă sintaxa cu două puncte (: :) CSS3 acceptă, de asemenea, doar sintaxa (:), dar IE 8 acceptă doar un singur punct, așa că, deocamdată, este recomandat să folosiți doar un singur punct pentru a avea cea mai bună asistență pentru browser.

:: este formatul mai nou destinat să distingă pseudo-conținutul de pseudo-selectori. Dacă nu aveți nevoie de asistență IE 8, nu ezitați să utilizați dublu colon.

Legate de

::prima linie
::prima literă
Selectoare de pseudo-clasă

Suport pentru browser

Probleme mici:

Firefox 3.5- nu ar permite poziționarea absolută a pseudoelementelor.
În Opera 9.2, spațiul alb este întotdeauna afișat în acest pseudo-element ca și cum ar fi pretext.
IE 8 nu acceptă z-index pe ele