:: före / :: efter - CSS-tricks

Med ::beforeoch ::afterpseudoelementen i CSS kan du infoga innehåll på en sida utan att det behöver finnas i HTML. Medan slutresultatet faktiskt inte finns i DOM verkar det på sidan som om det är och skulle i princip vara så här:

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

 before after

De enda skälen att använda den ena över den andra är:

Du vill att det genererade innehållet ska komma före elementets innehåll, positionellt.
Den ::afterinnehåll är också ”efter” i käll ordning, så det kommer att positionera ovanpå :: innan om staplas ovanpå varandra naturligt.

Observera att innehållet fortfarande finns i det element de används på. Namngivningen känns som om de kan komma, vet du, före eller efter elementet, men det är verkligen före eller efter det andra innehållet inuti.

Värdet för innehållet kan vara:

En sträng: content: "a string"; - specialtecken måste kodas speciellt som en unicode-enhet. Se sidan glyfer.
En bild: content: url (/path/to/image.jpg.webp); - Bilden infogas med exakta mått och kan inte ändras. Eftersom saker som lutningar faktiskt är bilder kan ett pseudoelement vara en lutning.
Ingenting: innehåll: “”; - Användbar för clearfix och infoga bilder som bakgrundsbilder (ställ in bredd och höjd, och kan till och med ändra storlek med bakgrundsstorlek).
En räknare: content: counter(li); - Verkligen användbart för stylinglistor tills: markören kommer.

Observera att du inte kan infoga HTML (åtminstone kommer det att återges som HTML). content: "";

: vs ::

Varje webbläsare som stöder dubbel kolon (: :) CSS3-syntax stöder också bara (:) syntax, men IE 8 stöder bara enkel kolon, så för närvarande rekommenderas att du bara använder en kolon för bästa webbläsarstöd.

:: är det nyare formatet avsett att skilja pseudoinnehåll från pseudoväljare. Om du inte behöver IE 8-stöd, använd gärna dubbel-kolon.

Relaterad

::Första linjen
::första bokstaven
Pseudo klassväljare

Webbläsarstöd

Små frågor:

Firefox 3.5- tillåter inte absolut positionering av pseudo-element.
I Opera 9.2 visas alltid blanksteg inom detta pseudoelement som om det är pretext.
IE 8 stöder inte z-index på dem