De contenteigenschap in CSS wordt gebruikt in combinatie met de pseudo-elementen ::beforeen ::after. Het wordt gebruikt om letterlijk inhoud in te voegen. Er zijn vier waardetypes die het kan hebben.
Draad
.name::before ( content: "Name: "; )Dan een element als dit:
Chris Zou als volgt worden weergegeven:
Name: ChrisHet kan ook een lege string zijn, wat vaak voorkomt in zaken als de clearfix.
Teller
div::before ( content: counter(my-counter); )Meer informatie daarover.
Beeld
div::before ( content: url(image.jpg.webp); )Dit is letterlijk een afbeelding op de pagina zoals die display: blockop de een of andere manier te maken, de grootte ervan te bepalen en background-image. Op die manier kunt u het formaat wijzigen met background-size.
Attribuut
U kunt waarden gebruiken (in ieder geval strings) die rechtstreeks uit attributen in de HTML worden gehaald.
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 */ ) )De attr()functie heeft nog geen “types”, dus je kunt geen waarde zoals 20px(alleen strings) doorgeven , maar ooit!
alternatieve tekst
De specificatie zegt dat je een /in de syntaxis kunt gebruiken om alternatieve tekst weer te geven. Bijvoorbeeld…
.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )Misschien zou je het kunnen gebruiken zoals ...
- Make Bed
- Grocery Shop
- Sweep Driveway
(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )Meer informatie
Inhoud die op deze manier wordt ingevoegd, bevindt zich niet echt in de DOM, dus het heeft enkele beperkingen. U kunt bijvoorbeeld een evenement niet rechtstreeks (alleen) aan een pseudo-element koppelen. Het is ook inconsequent of tekst die op deze manier is ingevoegd, al dan niet wordt gelezen door schermlezers (meestal is dat tegenwoordig) of dat u deze kunt selecteren (meestal niet tegenwoordig).
- Coole dingen die pseuedo-elementen kunnen doen
- Presentatie over pseudo-elementen
- MDN Docs
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 4 | 2 | 9 | 12 | 3.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Voor Opera, url()alleen ondersteund in versie 7+.