Az contentingatlan CSS-t használnak együtt a pszeudo-elemek ::beforeés ::after. Szó szerint a tartalom beillesztésére szolgál. Négy értéktípusa lehet.
Húr
.name::before ( content: "Name: "; )Akkor egy ilyen elem:
Chris Így jelenítené meg:
Name: ChrisLehet egy üres karaktersorozat is, amelyet általában olyan dolgok láthatnak, mint a clearfix.
Számláló
div::before ( content: counter(my-counter); )További információ erről.
Kép
div::before ( content: url(image.jpg.webp); )Ez szó szerint olyan kép az oldalon, mint amilyen display: blockvalamilyen módon elkészítve, méretezve és felhasználva background-image. Így átméretezhetné background-size.
Tulajdonság
Használhat olyan értékeket (különben is karakterláncokat), amelyeket közvetlenül a HTML attribútumai vesznek át.
60 (data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )A attr()függvénynek még nincsenek „típusai”, így nem adhat át olyan értéket, mint 20px(csak karakterláncok), de egyszer!
Alternatív szöveg
A specifikáció azt mondja, hogy /a szintaxisban az a segítségével fel lehet sorolni az alternatív szöveget. Például…
.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )Talán használhatná úgy, mint…
- Make Bed
- Grocery Shop
- Sweep Driveway
(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )Több információ
Az így beillesztett tartalom valójában nem szerepel a DOM-ban, ezért vannak bizonyos korlátai. Például nem csatolhat eseményt közvetlenül (csak) az álelemekhez. Az sem következetes, hogy az ilyen módon beillesztett szöveget olvassák-e a képernyőolvasók (általában manapság szokták), vagy ki tudja választani (manapság általában nem).
- Remek dolgok, amelyekre az álelemek képesek
- Előadás az álelemekről
- MDN Docs
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 4 | 2 | 9. | 12. | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Opera esetében url()csak a 7+ verzióban támogatott.