Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété content

Description de la propriété content.

Cette propriété très particulière ajoute ou remplace du contenu. Elle s'utilise le plus souvent avec les pseudo-éléments ::before et ::after mais peut dans quelques cas être utilisée sur l'élément lui-même.

Voici un premier exemple, dans lequel content a été utilisé sur les pseudo-éléments Object et Object.

Les caractères < et > ont été ajoutés en rouge

au début et à la fin de chaque paragraphe

Cliquez pour afficher le code CSS

Cet autre exemple utilise la propriété content sur un sélecteur du type élément. Dans ce cas, les possibilités sont plus limitées : il est seulement possible de remplacer le contenu de l'élément par une image (les autres syntaxes ne sont pas traitées).
Nous avons utilisé également une directive @media pour que le contenu de l'élément soit remplacé par une image lorsque la largeur d'écran devient inférieure à 900 pixels (réduisez la fenêtre du navigateur pour observer le fonctionnement).

Supposons que ce texte nécessite une largeur minimale pour être lisible. Grâce aux média-queries et à la propriété content, il est possible de remplacer le texte par une image lorsque la largeur est insuffisante.
Cliquez pour afficher le code CSS.

 

Mise en forme de l'ajout.

De nombreuses propriétés de mise en forme peuvent être utilisées pour présenter le contenu ajouté par content (couleur, police, etc). en particulier, il est possible de préciser une valeur pour la propriété display afin de définir comment doit être affiché l'ajout réalisé par content.

p:before { content:'>>>'; display:block; }

Jeu de caractères.

Dès lors que la propriété content est utilisée dans une feuille de styles, il est préférable de préciser dans quel jeu de caractères est enregistré le fichier : voir pour cela la directive @charset.

Insertion de caractères spéciaux.

Si vous avez besoin d'utiliser un caractère spécial avec la propriété content il faudra connaître son code en hexadécimal. Vous pouvez éventuellement utiliser notre Outil de recherche de caractères qui fournit les codes décimaux et hexadécimaux.
Les entités HTML ne sont malheureusement pas reconnues par content.

Voici par exemple comment insérer le symbole de copyright ( © ) avec la propriété content :

content:'\A9';

Syntaxes pour content.

  • content: none;

    Valeur par défaut. Rien n'est ajouté.

  • content: normal;

    Cette valeur ne change rien au contenu de l'élément.

  • content: counter(nom-compteur);

    Insère la valeur d'un compteur.
    Reportez-vous aux propriétés CSS counter-reset et counter-increment pur découvrir comment initialiser et gérer des compteurs en CSS.

  • content: open-quote; content: close-quote;

    Insère un guillemet ouvrant ou un guillemet fermant.
    open-quote s'utilise plus logiquement avec le sélecteur Object, tandis que close-quote eset plus adapté au sélecteur Object, mais rien n'empêche d'utiliser ces valeurs avec un des autres sélecteurs acceptés par content.
    Les caractères utilisés comme guillemet ouvrant et fermant sont définis par la propriété CSS quotes.

  • content: no-open-quote; content: no-close-quote;

    Empêche l'insertion du guillemet ouvrant ou du guillemet fermant.
    Bien que le caractère ne soit pas inséré, le niveau d'imbrication est mis à jour : il est incrémenté de 1 par un guillemet ouvrant et décrémenté par un guillemet fermant. A chaque niveau d'imbrication correspond une paire de guillemets différente.

  • content: 'du texte';

    Insère le texte spécifié entre apostrophes ou entre guillemets.
    Si un caractère spécial doit être inséré, on utilisera la syntaxe \xxxxxxxx est le code hexadécimal du caractère. Exemple \152 insère le caractère Œ.

  • content: url(...);

    Insère le fichier indiqué. Il peut s'agir d'une image, d'un son ou d'une vidéo.

  • content: attr(...);

    Insère la valeur de l'attribut indiqué. Si cet attribut n'est pas présent dans le code HTML, rien n'est inséré. Pour plus d'informations, reportez-vous à la fonction attr().

  • content: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

content :
Code CSS :  
#demo::before {content:none;}
#demo::after {content:none;}
Code CSS :  
body {counter-reset:n;}
#demo::before {counter-increment:n; content:counter(n) '. ';
Code CSS :  
#demo::before {content:open-quote;}
#demo::after {content:no-close-quote;}
Code CSS :  
#demo::before {content:no-open-quote;}
#demo::after {content:close-quote;}
Code CSS :  
#demo::before {content:open-quote;}
#demo::after {content:close-quote;}
Code CSS :  
#demo::before {content:url('img/content-1.png') ' ';}
Code CSS :  
#demo::before {content:'>>> ';}
Code CSS :  
#demo::before {content:'ID = ' attr(id) ' : ';}
Ne craignez pas d'atteindre la perfection, vous n'y arriverez jamais. (1)
Qui promène son chien est au bout de la laisse. (2)
Tout ce qui m'intéresse, soit ça fait grossir, soit c'est immoral ! (3)

(1) Salvador Dali.

(2) Serge Gainsbourg.

(3) Coluche.

Voir aussi...

Ajout de contenu - Propriétés.

Ajout de contenu - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @counter-style : Définition d'un compteur personnalisé.

Ajout de contenu - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • counter() : Renvoie la valeur actuelle d'un compteur.
  • counters() : Renvoie la valeur d'un compteur hiérarchique.