Content - Propriété CSS
Résumé des caractéristiques de la propriété content
::before
et ::after
.normal
content
passe d'une valeur à l'autre sans transition.Schéma syntaxique de content
.
content
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
string
est une chaîne de caractères, entre apostrophes ou entre guillemets.fct()
et une fonction qui génère du contenu :counter()
,target-counter()
,leader()
,attr()
.- Plusieurs de ces valeurs ou fonctions peuvent être énumérées, sans séparateur particulier.
- Le caractère slash introduit du contenu alternatif, non affiché, mais lisible par les systèmes de restitution vocale.
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
, ::after
ou ::marker
,
mais peut, dans quelques cas, être utilisée sur l'élément lui-même.
Voici un premier exemple, dans lequel la propriété content
a été utilisée de la façon la plus courante : sur les pseudo-éléments
::before
et ::after
.
Les caractères < et > ont été ajoutés en rouge
au début et à la fin de chaque paragraphe
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).
content
, il est possible de remplacer le texte par une image lorsque la largeur est
insuffisante.
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. Cela peut se faire avec la directive @charset
au début de la feuille de styles.
Insertion de caractères spéciaux.
Si vous avez besoin d'utiliser un caractère spécial avec la propriété content
, notre outil codes des caractères UTF
peut vous être très utile. Vous avez deux possibilités :
- Copier-coller le caractère dans votre feuille de styles, depuis la page codes des caractères UTF.
- Utiliser le code hexadécimal du caractère, avec la syntaxe ci-dessous.
Les entités HTML ne sont pas utilisables à partir de la feuille de styles CSS.
Voici par exemple comment insérer le symbole de copyright © (code hexadécimal = A9
) avec la propriété content
:
content:'\A9';
ou
content:'©';
Valeurs pour content
.
- content: normal;
Valeur par défaut. Cette valeur ne change rien au contenu de l'élément.
- content: none;
Rien n'est ajouté.
- content: open-quote; content: close-quote;
Insère une marque de citation ouvrante ou fermante. En langue française, les marques de citation sont souvent les doubles chevrons (
« »
), tandis que la langue anglaise utilise plutôt le guillemet.
open-quote
s'utilise plus logiquement avec le sélecteur::before
, tandis queclose-quote
est plus adapté au sélecteur::after
, mais rien n'empêche d'utiliser ces valeurs avec un des autres sélecteurs acceptés parcontent
.De plus ces deux valeurs mettent à jour le niveau de citation. Il s'agit d'un compteur qui est incrémenté par
open-quote
et décrémenté parclose-quote
. Des marques de citation différentes peuvent être associées à chacun des niveaux de citation.Les caractères utilisés comme marques de citation ouvrante et fermante pour chacun des niveaux de citation sont définis par la propriété CSS
quotes
. - content: no-open-quote; content: no-close-quote;
Empêche l'insertion des marques de citation ouvrante ou fermante.
Bien que le caractère ne soit pas inséré, le niveau d'imbrication est mis à jour : il est incrémenté de 1 par la valeurno-open-quote
et décrémenté par la valeurno-close-quote
. A chaque niveau d'imbrication correspond une paire de guillemets différente.Il est parfois nécessaire que les marques de citation englobent plusieurs éléments. C'est le cas par exemple si on souhaite ouvrir un guillemet sur le premier paragraphe et le fermer sur le dernier paragraphe. Dans ce cas, plusieurs éléments (les paragraphes p) seront englobés dans la même citation. Le CSS suivant résout ce problème.
p:first-child::before {content:open-quote;} p:first-child::after {content:no-close-quote;} p:last-child::before {content:no-open-quote;} p:last-child::after {content:close-quote;}
- 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\xxxx
(xxxx
étant le code hexadécimal du caractère). Exemple\152
insère le caractèreŒ
. - content: counter(...); content: counters(...); content: target-counter(...); content: target-counters(...);
Ces quatre syntaxes insèrent la valeur d'un compteur dans le document. Reportez-vous à la propriétés
counter-reset
etcounter-increment
pour savoir comment initialiser et gérer vos propres compteurs.counter()
: renvoie la valeur d'un compteur : un numéro incrémenté automatiquement.counters()
: renvoie la valeur d'un compteur hiérarchique, utile lorsque plusieurs comptages sont imbriqués. On obtient par exemple3.2.5
target-counter()
: renvoie la valeur d'un compteur à un endroit particulier du document.target-counters()
: renvoie la valeur d'un compteur hiérarchique à un endroit particulier du document.
L'exemple ci-après affiche la valeur du compteur prédéfini
list-item
après ce court texte. Malheureusement les navigateurs ne traient pas tous de la même façon ce compteurlist-item
. Avec c'est la valeur4
qui s'affichera car la dernière liste (juste ci-dessus) comporte quatre éléments, tandis que avec oi ce sera la valeur 6; correspondant à la numérotation principale.id="syntaxe-counterCompteur prédéfinilist-item
syntaxe-counter::after {content:' = ' counter(list-item);}
- content: url(...); content: attr(...); content: leader(...);
De nombreuses fonctions génèrent du contenu pouvant être repris par
content
. Voici les principales. Reportez-vous à leur description pour davantage de précision sur leur syntaxe.url()
: Insère le fichier indiqué. Il peut s'agir d'une image, d'un son ou d'une vidéo.attr()
: renvoie la valeur d'un attribut de l'élément.leader()
: renvoie des points de suite.
L'exemple ci-dessous montre l'utilisation de la fonction
url()
pour afficher une image dans le pseudo-élément::after
.id="syntaxe-url"Ce texte est suivi d'une image#syntaxe-url::after {content:' ' url('img/content-1.png');}
- content: ... / 'Texte alternatif';
Le caractère slash (
/
) introduit une série de valeurs, essentiellement du texte mais certaines des fonctions décrites ci-dessus peuvent également figurer ici. Ce contenu constituera le texte alternatif (équivalent de l'attributalt
d'une image) associé au pseudo-élément généré parcontent
.
Valeurs communes :
content: initial (normal
)
content: inherit
content: revert
content: revertLayer
content: unset
Ces valeurs sont décrites plus en détail sur leur page respective : initial
, inherit
, revert
, revert-layer
, unset
.
Afficher des balises HTML sur une page Web.
Des documents techniques peuvent doivent afficher du code HTML sur une page web, mais bien entendu ce code doit être
affiché tel quel, sans être interprété par le navigateur.
Voici une solution simple, qui consiste à définir une classe, que nous avons choisi de nommer tag
,
et d'écrire le code HTML sans les caractères <
et >
. Ceux-ci seront générés par
content
.
html contenu /html
Identifier les liens externes.
Il est courant sur un site web, de placer une repère sur les liens externes, ceux qui font quitter le site.
Voici comment faire ça en CSS, en utilisant la propriété content
et un sélecteur avec critère.
On part du principe que les liens externes ont des adresses absolues (qui commencent par 'http'), tandis que
les liens internes ont des adresses relatives (ce qui n'est pas forcément exact : des liens internes peuvent se faire
également avec des adresses absolues).
Nous avons choisi d'identifier les liens externes avec le symbole 🔗.
Points de suite. ⚠
On appelle "Points de suite" une suite de caractères identiques, qui relient deux informations. Par exemple, dans une table des matières les points de suite relient le titre d'un chapitre au numéro de la page. Dans un tarif, les points de suite relient le nom de l'article à son prix, etc.
Voici à quoi ressemble la table des matières de cette page avec des points de suite. Cet échantillon est une simulation, réalisée avec des points saisis dans le code HTML.
Syntaxe..................................................
Animation...............................................
Voici maintenant les points de suite réalisés avec CSS. La fonction leader()
calcule le nombre
de caractères nécessaires pour un alignement par la droite des valeurs qui suivent.
Cette fonctionnalité est encore très mal reconnue : il est probable que cela ne marchera pas sur votre navigateur.
Marques de citations imbriquées.
Le texte ci-dessous contient une citation qui en contient une autre.
L'usage des valeurs open-quote
et close-quot
, ainsi que de la propriété quotes
pour définir les marques
de citation, permet de distinguer facilement les niveaux de citation. Dans cet exemple des balises span ont été utilisées pour
séparer les citations.
Animation de la propriété content
.
L'animation de la propriété content
est certainement quelque chose d'assez rare, mais c'est cependant possible.
1F311
à 1F318
) :🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌑
Manipulation de la propriété content
par programme.
La modification de la propriété content
peut se faire en Javascript comme pour toutes les autres propriétés, mais la difficulté
est d'atteindre les pseudo-éléments ::before
et ::after
qui sont souvent utilisés avec content
.
En effet, les pseudo-éléments ne font pas partie du DOM, et ne peuvent donc pas être désignés par les fonctions Javascript habituelles
querySelector()
ou getElementById()
.
Modifier la valeur de content
en Javascript.
Ce premier exemple de code modifie la valeur de la propriété content
pour le pseudo-élément ::after
d'un élément du DOM.
Comme ces derniers ne sont pas accessibles directement avec Javascript, l'idée est de passer par des attributs.
En effet les attributs sont manipulables par Javascript, et peuvent être lus en CSS avec la fonction attr()
.
De plus, il est tout à fait possible d'utiliser des attributs personnalisés, qui ne sont pas des attributs HTML standards.
Le code ci-dessous utilise deux attributs personnalisés, nommés before
et after
.
Le code CSS doit bien entendu être adapté en conséquence.

let el = document.getElementById('id');
el.setAttribute('before','>> ');
el.setAttribute('after',' <<');
Lire la valeur de content
en Javascript.
Nous n'avons pas de solution à vous proposer pour relire la valeur de la propriété affectée à content
des pseudo-éléments.
Lire la valeur calculée de content
.
Pour relire la valeur calculée de content
associée à l'élément lui-même (cas finalement assez rare) ou à son pseudo-élément, le code suivant
peut être utilisé.
Si aucune valeur n'a été affectée à content
, le code renvoie la valeur initiale, c'est à dire normal
.

let el = document.getElementById('id');
let value = window.getComputedStyle(el, '::after').getPropertyValue('content');
Modifier la valeur de la propriété content
avec JQuery.
En utilisant l'astuce déjà employée pour le code Javascript, à savoir passer par les attributs, voici le code JQuery pour
modifier la propriété content
sur les pseudo-éléments ::before
et ::after
.
Notez que le code CSS doit être écrit en conséquence (voir Javascript).

$(el).attr('before','>> ');
$(el).attr('after',' <<');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Simulateur avec la propriété content
..
Le simulateur agit sur les pseudo-éléments ::before
et ::after
des trois lignes sur fond bleu ci-dessous.
Un compteur nommé demo
est incrémenté à chacune de ces lignes : la propriété content
peut donc le faire apparaître
avec la fonction counter()
.
En sélectionnant open-quote
dans la première série et normal
dans la deuxième série, vous constaterez que le caractère de citation change.
En effet le navigateur tient à jour le niveau de citation. A chaque niveau correspond des caractères d'ouverture et de fermeture différents.
open-quote
et no-open-quote
incrémentent ce niveau de citation,
close-quote
et no-close-quote
le décrémentent.
Si on ne choisit que open-quote
, le niveau de citation est sans cesse incrémenté et jamais décrémenté.
Notez aussi que les valeurs close-quote
et no-close-quote
sont sans effet si une des valeur open-quote
ou no-open-quote
n'est pas sélectionnée, car le niveau de citation est au départ à 0 : il n'est pas possible de le décrémenter.
Citations de : (1) Salvador Dali. (2) Serge Gainsbourg. (3) Coluche.
Prise en charge de content
par les navigateurs.
La propriété content
est bien reconnue par tous les navigateurs actuels.
content
pour ajouter du contenu au document.content
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini
Historique de la propriété content
.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Définition initiale de la propriétécontent
dans la version 2 du langage CSS.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Contenu généré - Niveau 3
Ajout de nouvelles possibilités : compteur relatif à la cible, points de suite, etc.14 Mai 2003Document de travail.
Voir aussi - Insertion de contenu.
La propriété content
fait partie du module CSS Generated Content Module( (Module CSS - Génération de contenu).
Les définitions suivantes sont également présentées dans ce même module.