:: prije / :: poslije - CSS-trikovi

::beforeI ::afterpseudo-elementi u CSS vam omogućuje umetanje sadržaja na stranici, bez da trebaju biti u HTML-u. Iako konačni rezultat zapravo nije u DOM-u, na stranici se pojavljuje kao da jest i u osnovi bi bio takav:

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

 before after

Jedini razlozi za korištenje jednog preko drugog su:

Želite da generirani sadržaj dolazi prije sadržaja elementa, pozicijski.
::afterSadržaj je „poslije” u source-red, tako da će pozicionirati na vrh :: prije, ako složenom na vrhu svake druge, naravno.

Imajte na umu da je sadržaj još uvijek unutar elementa na koji su primijenjeni. Imenuje se nekako kao da bi moglo doći, znate, prije ili poslije elementa, ali zapravo je prije ili poslije drugog sadržaja u njemu.

Vrijednost sadržaja može biti:

Niz: content: "a string"; - posebni znakovi trebaju biti posebno kodirani kao unicode entitet. Pogledajte stranicu glifova.
Slika: sadržaj: url (/path/to/image.jpg.webp); - Slika je umetnuta točnih dimenzija i ne može joj se promijeniti veličina. Budući da su stvari poput gradijenata zapravo slike, pseudo element može biti gradijent.
Ništa: sadržaj: “”; - Korisno za clearfix i umetanje slika kao pozadinskih slika (postavite širinu i visinu, a možete čak i promijeniti veličinu pozadine).
Brojač: content: counter(li); - Stvarno korisno za oblikovanje popisa dok se ne pojavi marker.

Imajte na umu da ne možete umetnuti HTML (barem će se prikazati kao HTML). content: "";

: vs ::

Svaki preglednik koji podržava dvostruko dvotočka (: :) CSS3 sintaksa također podržava samo (:) sintaksu, ali IE 8 podržava samo jednotočku, pa se za sada preporučuje najbolja upotreba dvotočke za najbolju podršku preglednika.

:: je noviji format namijenjen razlikovanju pseudo sadržaja od pseudo selektora. Ako vam nije potrebna podrška za IE 8, slobodno upotrijebite dvotačku.

Povezano

::prvi red
::prvo slovo
Izbornici pseudo klase

Podrška preglednika

Mali problemi:

Firefox 3.5 - ne dopušta apsolutno pozicioniranje pseudo elemenata.
U Operi 9.2 razmak se uvijek prikazuje unutar ovog pseudo-elementa kao da je pretekst.
IE 8 ne podržava z-indeks na njima