La content
propriété en CSS est utilisée en conjonction avec les pseudo-éléments ::before
et ::after
. Il est utilisé pour insérer littéralement du contenu. Il peut avoir quatre types de valeur.
Chaîne de caractères
.name::before ( content: "Name: "; )
Puis un élément comme celui-ci:
Chris
Rendrait comme ceci:
Name: Chris
Il peut également s'agir d'une chaîne vide, ce qui est généralement vu dans des choses comme le clearfix.
Contrer
div::before ( content: counter(my-counter); )
Plus d'informations à ce sujet.
Image
div::before ( content: url(image.jpg.webp); )
C'est littéralement une image sur la page comme le
serait. Cela pourrait aussi être un dégradé. Notez que vous ne pouvez pas modifier les dimensions de l'image lorsqu'elle est insérée de cette façon. Vous pouvez également insérer une image en utilisant une chaîne vide pour le contenu, en la créant d'une display: block
certaine manière, en la dimensionnant et en utilisant background-image
. De cette façon, vous pouvez le redimensionner avec background-size
.
Attribut
Vous pouvez utiliser des valeurs (des chaînes, de toute façon) qui proviennent directement des attributs du HTML.
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 */ ) )
La attr()
fonction n'a pas encore de «types», donc vous ne pouvez pas passer une valeur comme 20px
(juste des chaînes), mais un jour!
Texte alternatif
La spécification indique que vous pouvez utiliser un /
dans la syntaxe pour répertorier un texte alternatif. Par exemple…
.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )
Vous pourriez peut-être l'utiliser comme…
- Make Bed
- Grocery Shop
- Sweep Driveway
(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )
Plus d'information
Le contenu inséré de cette manière n'est pas vraiment dans le DOM, il a donc certaines limites. Par exemple, vous ne pouvez pas attacher un événement directement (uniquement) à un pseudo-éléments. Il est également incohérent que le texte inséré de cette manière soit lu ou non par les lecteurs d'écran (c'est généralement de nos jours) ou si vous pouvez le sélectionner (ce n'est généralement pas le cas de nos jours).
- Choses sympas que les pseudo-éléments peuvent faire
- Présentation des pseudo éléments
- Documents MDN
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
Chrome | Firefox | C'EST À DIRE | Bord | Safari |
---|---|---|---|---|
4 | 2 | 9 | 12 | 3.1 |
Mobile / tablette
Chrome Android | Android Firefox | Android | Safari sur iOS |
---|---|---|---|
88 | 85 | 2,1 | 3.2 |
Pour Opera, url()
uniquement pris en charge dans la version 7+.