Propriété CSS content
La propriété content est utilisée avec les éléments pseudos ::before et ::after, pour générer le contenu dans un élément. Elle a les valeurs suivantes:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
La propriété content doit être utilisée avec les éléments pseudos ::before et ::after, sinon, ils ne serons pas générés et insérés. Content doit toujours être ajoutée.
Les objets qui sont insérés avec la propriété content sont des éléments remplacés anonymes.
Valeur initiale | normal |
Appliquée à | Éléments pseudos ::before et ::after. |
Héritée | Non. |
Animable | Non. |
Version | CSS2 |
Syntaxe DOM | object.style.Content = "none"; |
Syntaxe
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<h2>Exemple de la propriété content</h2>
<body>
<p>Mon prénom est John</p>
<p class="country">J'habite au Canada</p>
</body>
</html>
Voici un exemple avec la valeur "string".
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
li:before{
content:"Élément de la liste";
}
p:after{
content:" with string value.";
}
</style>
</head>
<body>
<h2>Exemple de la propriété content</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Quelque paragraphe</p>
</body>
</html>
Un autre exemple avec la valeur "open-quote". Vieueillez noter que "open-quote" ne peut pas apparaître sans "close-quote".
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Exemple de la propriété content</h2>
<p>Bonjour, mon prénom est John</p>
<p>Je viens de Canada </p>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
normal | Définit le contenu à normal. C'est la valeur initiale. |
none | Définit le contenu à rien. L'élément pseudo n'est pas généré. |
counter | Définit le contenu comme un guichet. |
attr | Définit le contenu comme l'une des attribut du sélécteur. |
string | Définit le contenu à texte. |
open-quote | Définit le contenu à la citation d'ouverture. |
close-quote | Définit le contenu à la citation de fermeture. |
no-open-quote | Cette valeur est utilisée pour retirer la citation d'ouverture du contenu. |
no-close-quote | Cette valeur est utilisée pour retirer la citation de fermeture du contenu. |
url | Elle définit le contenu à média, tel qu'une image, un son ou un vidéo. Si l'image ne peut pas être affichée, elle sera ignorée ou quelque bouche-trou sera affiché. |
initial | Défint la valeur initiale. |
inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
1.0+ | 1.0+ | 1.0+ | 4.0+ |
Pratiquez vos connaissances
Quelle est la fonction du sélecteur CSS 'first-child' et 'last-child'?
Correcte!
Incorrecte!