Propriété CSS content

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.