Accueil    CSS    Propriété Content
 



style css content  Style CSS content

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété content s'utilise avec les pseudos élément ":before" et ":after" pour ajouter du contenu autour d'un élément html. Ce contenu peut être du texte, une image, un compteur, des guillemets ou une référence à la valeur d'un attribut de l'élément.

La plupart des éléments html peuvent ainsi voir leur contenu étendu par cette propriété à l'exception notamment de la balise <img>. Il faut également intégrer un <!doctype> pour que la propriété s'applique correctement pour certains navigateurs comme Internet Explorer.



Propriétés pour le style content :




Propriété Définition Valeurs CSS
content Permet d'ajouter du contenu autour d'un élément html en utilisant les pseudos classes :before et :after attr(attribut)
counter
none
normal
texte
url
open-quote
close-quote
no-open-quote
no-close-quote
CSS 2


Exemple d'utilisation du style css content :




- Exemple de contenu avec la balise image (supporté par peu de navigateurs)
Styles appliqués :
   .img-exemple:before{content:'Image : ';}
   .img-exemple:after{content: ' - fichier : [' attr(src) ']';}

<img src="exemples/arobas.png" alt="exemple" style="width:36px; height:36px;" />


- Exemple de lien dont le contenu a été étendu :
Styles appliqués :
   .a-exemple:before{content:'lien : ';}
   .a-exemple:after{content: ' - reference[' attr(href) ']';}

<a class="a-exemple" href="http://www.startyourdev.com">lien avec content</a>


- Exemple de trois paragraphes dont le contenu a été étendu avec un compteur :
Styles appliqués :
   .para-exemple{counter-increment: Index;}
   .para-exemple:before{content:'paragraphe numéro ' counter(Index) ' : ';}
   .para-exemple:after{content: url('exemples/puce-verte.png');}

<p class="para-exemple">Exemple de texte inclus dans le premier paragraphe</p>
<p class="para-exemple">Exemple de texte inclus dans le second paragraphe</p>
<p class="para-exemple">Exemple de texte inclus dans le troisième paragraphe</p>


- Exemple de tableau html dont le contenu a été étendu :
Styles appliqués :
   .table-exemple:before{content:'table : ';}
   .table-exemple:after{content: ' - FIN';}

<table class="table-exemple" rules="all" style="border-collapse:collapse; border:solid 1px black;">
   <tr><td>cellule 1</td><td>cellule 2</td></tr>
   <tr><td>cellule 3</td><td>cellule 4</td></tr>
</table>


Ajout de contenu autour de divers éléments html :

- Exemple de contenu avec la balise image (supporté par peu de navigateurs)
exemple


- Exemple de lien dont le contenu a été étendu :

test


- Exemple de trois paragraphes dont le contenu a été étendu avec une image (avant) et un compteur (après) :

Exemple de texte inclus dans l'élément paragraphe

Exemple de texte inclus dans l'élément paragraphe

Exemple de texte inclus dans l'élément paragraphe




- Exemple de tableau html dont le contenu a été étendu :

cellule 1cellule 2
cellule 3cellule 4