:: ennen / :: jälkeen - CSS-temppuja

::beforeJa ::afterpseudo-elementtejä CSS voit lisätä sisältöä päälle sivulle ilman sitä tarvitse olla HTML. Vaikka lopputulos ei todellakaan ole DOM: ssä, se näkyy sivulla ikään kuin se olisi, ja se olisi olennaisesti seuraava:

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

 before after

Ainoat syyt käyttää toisiaan ovat:

Haluat, että luotu sisältö tulee ennen elementin sisältöä, paikallisesti.
::afterSisältö on myös ”jälkeen” in lähde-järjestyksessä, niin se kantaa päälle :: ennen, jos päällekkäin toistensa luonnollisesti.

Huomaa, että sisältö on edelleen sen elementin sisällä, johon sitä käytetään. Nimeämismuoto tuntuu siltä, että ne saattavat tulla, tiedätkö, ennen elementtiä tai sen jälkeen, mutta se on oikeastaan ennen muuta sisällä olevaa sisältöä.

Sisällön arvo voi olla:

Merkkijono: content: "a string"; - erikoismerkit on koodattava erityisesti unicode-entiteettinä. Katso kuviot -sivu.
Kuva: content: url (/path/to/image.jpg.webp); - Kuva lisätään tarkkojen mittojen mukaan, eikä sen kokoa voi muuttaa. Koska asiat kuten kaltevuudet ovat itse asiassa kuvia, pseudoelementti voi olla liukuvärjäys.
Ei mitään: sisältö: “”; - Hyödyllinen selväkorjauksiin ja kuvien lisäämiseen taustakuvina (määritä leveys ja korkeus ja voi jopa muuttaa kokoa taustakoolla).
Laskuri: content: counter(li); - Todella hyödyllinen tyyliluetteloissa, kunnes: merkki tulee.

Huomaa, että et voi lisätä HTML-koodia (ainakaan se hahmonnetaan HTML-muodossa). content: "";

: vs ::

Jokainen kaksoispiste (: :) CSS3-syntaksia tukeva selain tukee myös vain (:) -syntaksi, mutta IE 8 tukee vain yhden kaksoispistettä, joten toistaiseksi suositellaan vain yhden kaksoispisteen käyttämistä parhaan selaintuen saamiseksi.

:: on uudempi muoto, jonka tarkoituksena on erottaa näennäissisältö näennäisselektorista. Jos et tarvitse IE 8 -tukea, voit käyttää kaksoispistettä.

Liittyvät

::ensimmäinen linja
::ensimmäinen kirjain
Pseudo-luokan valitsimet

Selaimen tuki

Pienet asiat:

Firefox 3.5- ei salli pseudoelementtien absoluuttista sijoittamista.
Opera 9.2: ssa välilyönti näytetään aina tässä pseudoelementissä kuin preteksti.
IE 8 ei tue niiden z-indeksiä