content CSS propriété

identifiant:after{
  content : open-quote;
}
identifiant:before{
  content : url("/img/icone/16x16/facebook.gif") " contenu ";
  /* url('data:image/.....) */
}
identifiant:before{
  content : " section " counter(nomducompteur);
}
identifiant:after{
  content : "(" attr(hreflang) ")";
}

Règles de syntaxes CSS pour content.

Guillemet dans la chaîne de caractères

Si votre chaîne de caractères est entre "" ou '' et que cette dernière comporte un guillemet de même type, vous devez mettre un antislash (//) devant chaque guillemet de la chaîne.

  content : 'cite:"l//'espace"';
  content : "cite://"l'espace//"";

Caractères accentués ou spéciaux mal interprétés

Si les caractères accentués ou spéciaux ne sont pas interprétés correctement, utilisez leur code hexadécimal pour le Css.

Gestion des quotes ou guillemets

Il faut savoir que suivant le navigateur les "quote" ou guillemets ne sont pas identiques :

• « » pour le niveau un et ‹ › pour le niveau deux pour Internet Explorer,
• “ ” pour le niveau un et ‘ ’ pour le niveau deux pour Firefox,
• " " pour le niveau un et ' ' pour le niveau deux pour Chrome.
• ...

Si vous ouvrez un guillemet et que vous ouvrez un second guillemet sans fermer le premier alors le second guillemet sera de niveau 2.

Pour afficher une fermeture de guillemets, il faut qu'il y ai une ouverture de guillemets correspondante. Par exemple si vous avez une ouverture de guillemets et deux fermetures de guillemets, le dernièr guillemet ne sera pas affiché.

propriété CSS content sur une balise IMG

Si vous utilisez la propriété Css content sur une balise IMG le texte inséré sera visible que si l'image n'est pas affichée. Il faut le voir un texte alternatif, comme l'attribut alt.

.imgalt{border:1px solid green}
.imgalt:before{ content:"before"}
.imgalt:after{ content:"after"}

Résultat :
Avec image existante :

Avec image en erreur :

Ce que vous devez voir :

Sachez cependant qu'a ce jour (09-2018) :

• edge n'affiche pas les contents sur une image.
• Firefox n'affiche pas le content sur une image de :before

Compatibilités navigateurs de la propriété content

Exemples et astuces CSS pour utiliser content

Mettre des sauts de ligne dans le content

Vous pouvez faire des sauts de ligne dans le texte du contenu en utilisant //00000A alias //A.

identifiant:before{
  white-space : pre;
  content : "1//A 2//A 3//00000A";
}

Résultat :

Ce que vous devez voir :

Espace après un code hexadécimal non interprété

L'espace après un code hexadécimal n'est pas pris en compte. Pour palier à ce problème, vous devez soit mettre un double espace soit un espace en code hexadécimal : //000020.

identifiant:before{
  content : "//0000E0 la"; /* ne fonctionne pas */
  content : "//0000E0  la"; /* espace pris en compte */
  content : "//0000E0//000020 la"; /* espace pris en compte */
}

Résultat :

Ce que vous devez voir :

Mettre des saut de ligne dans l'attribut pour l'affichage avec attr()

Si vous utiliser attr() de la propriété Css content, vous pouvez mettre des sauts de ligne qui seront interprétés à l'affichage du texte de l'attribut. Les sauts de ligne correspondent :

• 

• 


<style>
.sautdeligne:before{
    content:attr(data-attribut);
    white-space : pre;
}
</style>
<span data-attribut="Saut&#10;de&#x0A;ligne" class="sautdeligne">Texte dans balise</span>

Ce que vous devez voir :

Mettre des images base64 et svg dans content

Vous pouvez mettre des images au format svg. Pour cela vous devez mettre devant data:image/svg+xml;charset=UTF-8,

Vous pouvez mettre des images au format base64. Pour cela vous devez mettre devant data:image/png;base64,

Votre avis sur la définition content en CSS