content

Syntaxe

Paramètres

Description

Cette propriété permet d'ajouter un contenu généré avec des pseudo-sélecteurs «:before» et «:after». Cette propriété peut être utilisé si vous souhaitez ajouter un astérisque «*» en avant de chacun des champs obligatoires d'un formulaire ou dans le cas d'une traduction de langage humaine en CSS, ainsi, vous pourriez avoir tous les messages de français et d'anglais dans votre fichier CSS.

Remarques

• IE8 : Cette propriété est seulement supporté si un «!DOCTYPE» est indiqué sous le navigateur Web IE8.
• Usage spécifique aux pseudo-éléments : La propriété content est principalement utilisée avec les pseudo-éléments ::before et ::after. Elle permet d'insérer du contenu généré dynamiquement dans le DOM, sans avoir à modifier directement le HTML. C'est un outil puissant pour ajouter des icônes, des décorations ou des annotations légères tout en gardant le HTML propre.
• Types de contenu supportés : La propriété content peut accepter des chaînes de caractères, des valeurs vides (""), ou des éléments spéciaux comme des attributs (via attr()). Elle permet ainsi d'afficher des textes statiques ou dynamiques, comme le contenu d'attributs HTML (data-*, title,...). Cela offre une flexibilité pour personnaliser l'affichage selon le contexte de l'élément.
• Limites avec les éléments non textuels : content ne permet pas directement d'insérer des éléments HTML ou d'autres types de médias (comme des images ou des vidéos). Cependant, en combinaison avec des propriétés comme background-image, il est possible d'obtenir un rendu graphique complexe. Si vous avez besoin de plus de flexibilité, vous devrez ajouter ces éléments directement dans le DOM.
• Compatibilité avec les animations : Les valeurs définies via content peuvent être animées avec des transitions ou des animations CSS, ce qui est utile pour des effets visuels dynamiques. Cependant, seules les chaînes de caractères et les valeurs statiques sont animables. Pour des animations plus complexes, il peut être nécessaire d'utiliser JavaScript ou d'autres propriétés CSS.
• Accessibilité et SEO : Le contenu ajouté via content n'est pas considéré comme une partie du DOM principal par les moteurs de recherche et les technologies d'assistance. Il ne devrait donc pas être utilisé pour des informations importantes ou critiques pour l'utilisateur. Conservez cette propriété pour des éléments purement décoratifs ou des informations complémentaires.
• Utilisation pour des indicateurs visuels : Une des applications courantes de content est l'ajout d'indicateurs, comme des astérisques pour signaler des champs obligatoires dans des formulaires. Cela permet d'intégrer des éléments visuels rapidement, sans modifier la structure HTML. Veillez toutefois à tester sur différents navigateurs pour garantir une compatibilité parfaite.
• Flexibilité avec les icônes et polices de caractères : En utilisant content avec des bibliothèques comme Font Awesome ou des polices de caractères d'icônes personnalisées, vous pouvez insérer des symboles ou des glyphes. Cela simplifie le processus d'ajout d'icônes et réduit le besoin d'images supplémentaires. Assurez-vous que vos icônes soient lisibles et accessibles pour tous les utilisateurs.
• Propriétés combinées avec content : content est souvent utilisée en combinaison avec d'autres propriétés CSS comme position, padding, ou display. Cela permet de placer et de styliser le contenu généré précisément où il est nécessaire. Gardez à l'esprit que ces pseudo-éléments héritent rarement des styles parentaux, alors définissez explicitement leurs propriétés comme la taille ou la couleur de police de caractères.

Exemple

L'exemple suivant permet de changer la source de l'image (src) d'une balise IMG à partir d'une classe :