CSS : content

La pseudo-classe CSS content est le contenu à insérer avec les pseudo-classes CSS before et after.

#mon_identifiant:before {
content:"/!\";
}

Elle permet d’affecter les contenus à insérer avec les pseudo-classes CSS before et after.
Les valeurs possibles sont :

  • (url) : un lien vers une page web,
  • url(url.gif): une image,
  • une chaîne de caractères : un mot, une phrase…,entre  » « ,
  • open-quote : ouvre un guillemet (‘ » ‘ par défaut),
  • close-quote : ferme un guillemet (‘  » ‘ par défaut),
  • no-open-quote : n’ouvre pas un guillemet,
  • no-close-quote : ne ferme pas un guillemet,
  • attr([nom_attribut]) : la valeur d’un attribut de votre choix
  • counter([nom], [style]) : la valeur du compteur [nom].
  • counters([nom], [string], [style]): la valeur de tous les compteurs [nom], séparés par [string].
  • inherit : hérite de son parent.

Exemple :

CSS
#avant:before{
content:"Texte en latin : ";
color:red;
}
HTML
<div id="avant">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,consectetur congue elit.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,consectetur congue elit.

1 Commentaire pour cet article.

  1. Sacapuss
    Le 26 juin 2011 à 20:08.

    Bonjour,

    vous écrivez :
    (url) : un lien vers une page web
    Je n’arrive pas à faire fonctionner cela ???

    Moi, j’écris :
    powered:before { content:url(http://images.doobee.fr/dbb.png); width:25px; }
    Cela ne modifie pas la largeur de l’image; qu’en pensez-vous ?

Laisser un commentaire