Propriété CSS content
La propriété content est utilisée avec les pseudo-éléments ::before et ::after pour générer du contenu à l'intérieur d'un élément. Sans valeur explicite, les pseudo-éléments restent vides. La propriété accepte les valeurs suivantes :
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
INFO
Les objets insérés à l'aide de la propriété content sont des éléments remplacés anonymes. Remarque : 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 à | ::before et ::after pseudo-éléments. |
| Héritée | 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 voir 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>Valeurs
| Valeur | Description |
|---|---|
| normal | Définit le contenu sur normal. Il s'agit de la valeur par défaut. |
| none | Définit le contenu sur rien. 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, telle qu'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é sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelles sont les différentes catégories de contenu CSS pouvant être utilisées pour contrôler la taille du contenu d'une boîte ?