Propriété CSS content
La propriété content s'utilise avec ::before et ::after pour générer du contenu dans un élément. Exemples et valeurs.
La propriété content s'utilise avec les pseudo-éléments ::before et ::after pour générer du contenu à l'intérieur d'un élément. Sans valeur explicite, ces pseudo-éléments ne sont pas du tout rendus, donc content est ce qui fait apparaître une boîte générée en premier lieu.
Cette page explique quand et comment utiliser content : insérer du texte brut, récupérer des valeurs d'attributs avec attr(), numéroter des éléments avec des compteurs CSS, intégrer des images et des guillemets, et les pièges courants (comme le fait que le texte généré est inaccessible aux lecteurs d'écran).
La propriété accepte les valeurs suivantes :
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
Le texte inséré avec content ne fait pas partie du DOM — vous ne pouvez pas le sélectionner comme du texte normal, et la prise en charge par les technologies d'assistance est incohérente. Utilisez-le pour du contenu décoratif ou complémentaire, et non pour du contenu qui doit toujours être accessible à tous les lecteurs. La propriété quotes doit être définie sur l'élément pour que open-quote et close-quote affichent de véritables guillemets.
| Valeur initiale | normal |
|---|---|
| S'applique à | Les pseudo-éléments ::before et ::after. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | element.style.content = "none"; |
Syntaxe
Syntaxe de la propriété CSS content
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;Exemple de la propriété content :
Exemple de la propriété CSS content avec la valeur normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>My name is John</p>
<p class="country">I live in Canada</p>
</body>
</html>Résultat
Exemple de la propriété content avec la valeur "string" :
Exemple de la propriété CSS content avec la valeur string
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "List item";
}
p:after {
content: " with string value.";
}
</style>
</head>
<body>
<h2>Content property example</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Here is some paragraph</p>
</body>
</html>Dans l'exemple suivant, vous pouvez constater que open-quote ne peut pas apparaître sans close-quote.
Exemple de la propriété content avec la valeur "open-quote" :
Exemple de la propriété content avec les valeurs open-quote et close-quote
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
quotes: open-quote close-quote;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>Hello, my name is John</p>
<p>I am from Canada</p>
</body>
</html>Exemple de la propriété content avec les valeurs "open-quote" et "no-close-quote" :
Exemple de la propriété content avec les valeurs "open-quote" et "no-close-quote" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Example with content property</p>
</body>
</html>Utiliser la valeur attr() pour lire un attribut
attr() récupère la valeur d'un attribut HTML dans le contenu généré. Un usage courant consiste à afficher la cible d'un lien, ou à faire apparaître un attribut data-* sous forme d'étiquette de type info-bulle. La valeur de l'attribut est toujours traitée comme une string.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a::after {
content: " (" attr(href) ")";
color: #888;
}
</style>
</head>
<body>
<p>Visit <a href="https://www.w3docs.com">W3docs</a> to learn more.</p>
</body>
</html>Cela affiche le lien sous la forme Visit W3docs (https://www.w3docs.com) to learn more. — notez comment une string et attr() sont concaténées simplement en les écrivant côte à côte.
Utiliser des compteurs pour numéroter des éléments
Les compteurs CSS permettent de générer des numéros séquentiels sans modifier le HTML. Vous initialisez un compteur avec counter-reset, l'incrémentez avec counter-increment, et l'affichez avec la fonction counter() dans content. C'est la manière idiomatique de numéroter les titres, les étapes ou les figures.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h2>Introduction</h2>
<h2>Installation</h2>
<h2>Usage</h2>
</body>
</html>Chaque <h2> est automatiquement préfixé par Section 1: , Section 2: , et Section 3: .
Insérer une image avec la valeur url()
La valeur url() intègre une ressource externe — généralement une petite icône — dans la boîte générée. Cela fonctionne bien pour les marqueurs décoratifs, mais comme l'image ne se trouve pas dans le DOM, elle ne comporte pas de texte alternatif ; évitez donc de l'utiliser pour des images significatives.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.external::after {
content: url("https://www.w3docs.com/build/img/favicon.ico");
margin-left: 5px;
}
</style>
</head>
<body>
<p class="external">A link to an external resource</p>
</body>
</html>Le contenu généré est décoratif par défaut. Les lecteurs d'écran peuvent l'ignorer ou le lire de manière incohérente selon les navigateurs, et les utilisateurs ne peuvent pas le copier. Ne placez jamais un texte que le lecteur ne doit pas manquer (comme un prix ou un message d'erreur) uniquement dans une valeur content.
Valeurs
| Valeur | Description |
|---|---|
| normal | Définit le contenu comme normal. Il s'agit de la valeur par défaut. |
| none | Définit le contenu comme vide. Le pseudo-élément n'est pas généré. |
| counter | Définit le contenu sur une valeur de compteur. |
| attr | Définit le contenu sur la valeur d'un attribut de l'élément sélectionné. |
| string | Définit le contenu sur une chaîne de texte. |
| open-quote | Définit le contenu comme un guillemet ouvrant. |
| close-quote | Définit le contenu comme un guillemet fermant. |
| no-open-quote | Supprime le guillemet ouvrant du contenu. |
| no-close-quote | Supprime le guillemet fermant du contenu. |
| url | Définit le contenu sur une URL pointant vers une ressource, comme une image, un son ou une vidéo. Si l'image ne peut pas être affichée, elle sera soit ignorée, soit un espace réservé sera affiché. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
La propriété content n'a d'effet que sur les boîtes générées, elle est donc presque toujours associée aux pseudo-éléments qui les créent :
- ::before — insère du contenu généré avant le contenu propre d'un élément.
- ::after — insère du contenu généré après le contenu propre d'un élément.