A CSS ::beforeés ::afterpszeudo-elemei lehetővé teszik a tartalom beillesztését egy oldalra anélkül, hogy a HTML-be kellene kerülnie. Bár a végeredmény valójában nincs a DOM-ban, az oldalon úgy jelenik meg, mintha lenne, és lényegében a következő lenne:
div::before ( content: "before"; ) div::after ( content: "after"; ) before after Az egyik ok az egyik használatára a másik felett:
- Azt szeretné, hogy a létrehozott tartalom az elem tartalma elé kerüljön, helyileg.
- A
::aftertartalom forrás-sorrendben is „utána” van, tehát a :: előtt helyezkedik el, ha természetesen egymásra kerül.
Vegye figyelembe, hogy a tartalom még mindig azon az elemen belül van, amelyre alkalmazzák. A névadás olyan érzés, mintha jöhetnének, tudod, az elem előtt vagy után, de valójában a belső tartalom előtt vagy után.
A tartalom értéke lehet:
- Karakterlánc:
content: "a string";- A speciális karaktereket speciálisan unicode entitásként kell kódolni. Lásd a karakterjelek oldalt. - Kép: tartalom: url (/path/to/image.jpg.webp); - A kép pontos méretben kerül beillesztésre, és nem lehet átméretezni. Mivel az olyan dolgok, mint a színátmenetek, valójában képek, az álelem gradiens lehet.
- Semmi: tartalom: “”; - Hasznos a tiszta fájljavításhoz és képek háttérképként történő beszúrásához (állítsa be a szélességet és a magasságot, és akár átméretezhesse a háttérméretet is).
- Számláló:
content: counter(li);- Nagyon hasznos a listák stílusához, amíg: jelző meg nem jelenik.
Ne feledje, hogy nem illeszthet be HTML-t (legalábbis ez HTML-ként jelenik meg). content: "";
: vs ::
Minden olyan böngésző, amely támogatja a kettős kettőspontot (: :) A CSS3 szintaxisa is csak a (:) szintaxist támogatja, de az IE 8 csak az egy kettőspontot támogatja, ezért egyelőre csak a kettős kettőspont használatát javasoljuk a legjobb böngészőtámogatáshoz.
a :: az újabb formátum, amely meg akarja különböztetni az áltartalmat az álválasztóktól. Ha nincs szüksége IE 8 támogatásra, nyugodtan használja a kettőspontot.
Összefüggő
- ::első sor
- ::első levél
- Pseudo osztályválasztók
Böngésző támogatás
Kis kérdések:
- A Firefox 3.5- nem engedélyezi az álelemek abszolút pozicionálását.
- Az Opera 9.2-ben a szóköz mindig ebben az álelemben jelenik meg, mintha
preszöveg lenne. - Az IE 8 nem támogatja a z-indexet rajtuk
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.3+ | 3,5+ | 6+ | 8+ | Igen | Igen |