Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

La propriété "content" et les pseudos classes :before & :after

La propriété CSS content est très peu utlisée à l’heure actuelle, principalement car elle est pas reconnue par Internet Explorer. Cependant, elle est très interessante et je vous invite à la découvrir si vous ne la connaissez pas…

La propriété CSS content a pour but de générer un contenu. C’est-à-dire que, sur un élément précis, vous pouvez ajoutez avant ou après celui-ci du texte, une images ou des guillemets.

Pour ce faire, il faut passer par les pseudo-classes :before et :after. Vous ne les connaissez peut-être pas mais elle sont cousines des plus connues :link, :visited, :hover et :active et fonctionnent de la même façon.

Dans le code CSS, cela ressemble à cela :

[css] a:before {content:" Lien :";} /* et/ou */ a:after {content:" Lien :";}

Cette propriété accepte :

  • Du texte entre guilllemets
  • Des images avec le même principe que la propriété background, c’est-a-dire url(image.png).
  • attr(x) : ajoute en texte la valeur de l’attribut « x » de son choix.
  • open-quote : ouvre un guillemet.
  • close-quote : ferme un guillemet.
  • no-open-quote : n’ouvre pas de guillemet.
  • no-close-quote : ne ferme pas de guillemet.
  • inherit : héritage

Toutes sortes de possibilités sont imaginables, voici un petit résumé de tout ce que j’ai pu voir sur le Web. Ces exemples ne fonctionnent pas sous Internet Explorer. Essayez avec Firefox.

Attention ! Cette propriété est très utile mais ne doit pas servir à générer un contenu indispensable à la compréhension du contenu global. Partez toujours dans l’optique que la propriété content et là pour ajouter des fioritures !

Plus d’infos à ce sujet :


Ce que nos lecteurs en disent :

  1. Alex Kirchen

    Euuuhhhh, ça veut dire quoi
    attr(x) : ajoute en texte la valeur de l’attribut "x" de son choix. ??

  2. Shemu

    attr(alt) affichera ce qui est renseigné dans la valeur de l’attribut alt.
    Par exemple :
    <img src= »img.png » alt= »Mon image » />
    attr(alt) affichera Mon image

Les commentaires sont clos.