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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 4.0+

Pratiquez vos connaissances

Quelle est la fonction du sélecteur CSS 'first-child' et 'last-child'?
Trouvez-vous cela utile?