::beforeI ::afterpseudo-elementy w CSS pozwala na wstawianie treści na stronie bez potrzeby być w formacie HTML. Chociaż wynik końcowy nie znajduje się w modelu DOM, na stronie wygląda tak, jakby nim był, i zasadniczo wyglądałby tak:
div::before ( content: "before"; ) div::after ( content: "after"; ) before after Jedyne powody, dla których warto używać jednego nad drugim, to:
- Chcesz, aby wygenerowana treść znajdowała się przed zawartością elementu, pozycyjnie.
::afterZawartość jest również „po” w celu źródłowego, więc będzie umieszczenie na szczycie :: przed jeśli ułożone na siebie w sposób naturalny.
Zwróć uwagę, że zawartość nadal znajduje się wewnątrz elementu, do którego została zastosowana. Nazewnictwo wydaje się, że mogą pojawić się, wiesz, przed lub po elemencie, ale tak naprawdę jest przed lub po innej zawartości wewnątrz.
Wartością treści może być:
- Ciąg:
content: "a string";- znaki specjalne muszą być specjalnie zakodowane jako jednostka Unicode. Zobacz stronę z glifami. - Obraz: content: url (/path/to/image.jpg.webp); - Obraz jest wstawiany w dokładnych wymiarach i nie można go zmienić. Ponieważ rzeczy takie jak gradienty są w rzeczywistości obrazami, pseudoelement może być gradientem.
- Nic: treść: „”; - Przydatne do wyraźnego naprawiania i wstawiania obrazów jako obrazów tła (ustaw szerokość i wysokość, a nawet możesz zmienić rozmiar z rozmiarem tła).
- Licznik:
content: counter(li);- Naprawdę przydatny do stylizacji list, dopóki: marker nie pojawi się.
Zauważ, że nie możesz wstawić HTML (przynajmniej zostanie on wyrenderowany jako HTML). content: "";
: vs ::
Każda przeglądarka obsługująca podwójny dwukropek (: :) Składnia CSS3 obsługuje również tylko składnię (:), ale IE 8 obsługuje tylko pojedynczy dwukropek, więc na razie zaleca się używanie pojedynczego dwukropka, aby uzyskać najlepszą obsługę przeglądarki.
:: to nowszy format przeznaczony do odróżnienia pseudo treści od pseudoselektorów. Jeśli nie potrzebujesz obsługi IE 8, możesz użyć dwukropka.
Związane z
- ::Pierwsza linia
- :: pierwsza litera
- Selektory pseudoklas
Wsparcie przeglądarki
Małe problemy:
- Firefox 3.5 - nie pozwoliłby na absolutne pozycjonowanie pseudoelementów.
- W Operze 9.2 białe znaki są zawsze wyświetlane w tym pseudo elemencie, tak jakby to był
pretekst. - IE 8 nie obsługuje na nich indeksu Z
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.3+ | 3.5+ | 6+ | 8+ | tak | tak |