LA CASCADE

La propriété content (contenu) de CSS est utilisée avec les les pseudo-éléments :before et :after. Elle sert, comme son nom l'indique, à insérer du contenu, et elle est obligatoire dans les pseudo-éléments. Vous ne pouvez pas supprimer la propriété content, le pseudo-élément ne fonctionnerait pas. A minima, la propriété content doit contenir une chaîne de caractères vide ("").

La propriété content peut avoir quatre types de valeurs :

Chaîne de caractères

//CSS
.name:before {
  content: "Mon nom: ";
}

À la suite de quoi un élément tel que :

//HTML
<div class="name">Chris</div>

serait rendu ainsi :

Mon nom: Chris

Il pourrait aussi s'agir d'une chaîne de caractères vide, comme on le voit souvent dans les clearfix :

//CSS
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Compteur

//CSS
div:before {
  content: counter(my-counter);
}

Image

//CSS
div:before {
  content: url(image.jpg);
}

Le résultat sur la page est une image, tout comme img. On pourrait aussi avoir un dégradé. Notez cependant qu'en l'insérant ainsi vous ne pouvez pas modifier ses dimensions.

Si toutefois on voulait pouvoir redimensionner l'image, on pourrait procéder ainsi : utiliser une chaîne de caractères vide pour le contenu, puis ajouter display: block;, lui donner ensuite des dimensions et enfin utiliser background-image pour insérer l'image. De cette façon, vous pourriez redimensionner l'image grâce à background-image.

Attribut

Vous pouvez utiliser les valeurs tirées des attributs d'un élément HTML :

//HTML
<div data-visual-label="Widget Rating">60</div>

//CSS
[data-visual-label]:before {
  content: attr(data-visual-label) ": ";
}

Pour conclure :

Rappelez-vous que le contenu inséré avec les pseudo-éléments n'est pas dans le DOM, on ne peut donc pas tout faire avec. Par exemple vous ne pourrez pas attacher un événement directement (et uniquement) à un pseudo-élément. Par ailleurs, le contenu ne sera pas lu par les outils d'accessibilité.

Menu

Content

Chaîne de caractères

Compteur

Image

Attribut