CSS - contenu

La description

La propriété content définit le contenu à insérer dans les opérations de contenu généré. Cette propriété est utilisée avec: avant ou: après les pseudo éléments.

Valeurs possibles

  • string- Toute valeur de chaîne autorisée. Ceci est toujours entre guillemets.

  • URI - Un pointeur vers une ressource externe telle qu'une image.

  • counter- Il existe deux formes possibles de cette valeur: compteur (nom, style?) Et compteurs (nom, chaîne,? Style?). Dans les deux cas, le contenu sera la valeur du compteur nommé à ce point dans le document, rendu dans la valeur de style facultative (décimale par défaut). Dans le cas des compteurs (...), la valeur de chaîne facultative indique une chaîne pour suivre chaque instance du compteur nommé.

  • attr(X)- Provoque l'insertion de la valeur de l'attribut X pour le sujet du sélecteur. Par exemple, il est possible d'afficher la valeur de l'attribut alt d'une image en utilisant cette valeur.

  • open-quote - Provoque l'insertion de la chaîne appropriée spécifiée à l'aide des guillemets de propriété.

  • close-quote - Provoque l'insertion de la chaîne appropriée spécifiée à l'aide des guillemets de propriété.

  • no-open-quote- Empêche l'insertion de la chaîne appropriée spécifiée à l'aide des guillemets de propriété. Cependant, le niveau d'imbrication des guillemets est toujours augmenté.

  • no-close-quote- Empêche l'insertion de la chaîne appropriée spécifiée à l'aide des guillemets de propriété. Cependant, le niveau d'imbrication des guillemets est toujours diminué.

S'applique à

: avant et: après les pseudo-éléments.

Syntaxe DOM

object.style.content = "url(home.avi)"

Exemple

Voici l'exemple qui montre comment utiliser : avant l' élément pour ajouter du contenu avant tout élément.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Cela produira le lien noir suivant -

Voici l'exemple qui montre comment utiliser : élément après pour ajouter du contenu après n'importe quel élément.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Cela produira le lien noir suivant -