Attribut CONTENT

Rôle

L’attribut content permet d’insérer du contenu avec les pseudo-éléments :before et :after

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.content

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p:after{ /* apres le paragraphe */
  content: " --@Dany";
  color: red;
}

– Le code HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab at voluptatibus
 numquam reiciendis placeat quasi ducimus facilis quo natus alias fuga vitae debitis tenetur corporis
 tempore labore obcaecati nam!</p>

Résultat

La mention « tweet » (en rouge) a été rajoutée par le CSS à la fin du paragraphe

Compatibilité

L’attribut content est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut content sont:

normal

Valeur par défaut : souvent rien
Syntaxe :
content : normal

none

Aucun contenu
Syntaxe :
content : none

counter()

Définit un compteur. Doit s’utiliser avec l’attribut counter-increment 
Exemple :

string

Définit une chaine de caractères entre guillemets
Syntaxe :
content : "david"

attr()

Le contenu correspond à l’un des attributs de l’élément HTML

<a href="//tutowebdesign.com">Votre site : </a>

a:after {
content : attr(href)" ";
}

Exemple :

url()

Le contenu correspond à une ressource externe (image, ou autre média)
Syntaxe :
content : url(monimage.jpg)Exemple :

open-quote

Ajoute un guillemet de début
Syntaxe :
content : open-quoteExemple :

close-quote

Ajoute un guillemet de fin si un guillemet de début a été ajouté
Syntaxe :
content : close-quoteExemple :

no-open-quote

Supprime le guillemet de début si spécifié
Syntaxe :
content : no-open-quoteExemple :

no-close-quote

Supprime le guillemet de fin si spécifié
Syntaxe :
content : no-close-quoteExemple

initial

Le contenu à ajouter est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer le rajout de contenu imposée par une feuille de style qui cible aussi cet élément.
Syntaxe :
content : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
content : inherit

A voir aussi

color– text-align– text-decoration– text-transform– text-indent– word-spacing– line-height– letter-spacing– white-space– vertical-align– direction