Exemple
L'exemple suivant insère l'URL entre parenthèses après chaque lien:
a:after
{
content: " (" attr(href) ")";
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété de contenu est utilisé avec le: avant et: après les pseudo-éléments, pour insérer le contenu généré.
| Valeur par défaut: | normal |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS2 |
| Syntaxe JavaScript: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Note: IE8 ne supporte que la propriété du contenu si un DOCTYPE est spécifié!.
Syntaxe CSS
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;propriété valeurs
| Valeur | La description | Exemple |
|---|---|---|
| normal | Valeur par défaut. Définit le contenu, si spécifié, à la normale, ce qui par défaut est "none" (which is nothing) ce (which is nothing) | Try it » |
| none | Définit le contenu, si spécifié, rien | Try it » |
| counter | Définit le contenu comme un compteur | Try it » |
| attr (attribute) | Définit le contenu comme l' un des selector's de l' attribut | Try it » |
| string | Définit le contenu du texte que vous spécifiez | Try it » |
| open-quote | Définit le contenu d'être une citation d'ouverture | Try it » |
| close-quote | Définit le contenu d'être une citation de clôture | Try it » |
| no-open-quote | Supprime la citation d'ouverture du contenu, si spécifié | Try it » |
| no-close-quote | Supprime la citation de clôture du contenu, si spécifié | Try it » |
| url( url ) | Définit le contenu d'être une sorte de médias (an image, a sound, a video, etc.) | Try it » |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Comment ajouter des couleurs de balles pour <ul> ou <ol> en retirant leurs balles par défaut et en ajoutant une entité HTML qui ressemble à balles (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} Essayez - le vous - même » Pages associées
Référence CSS: : avant élément pseudo
Référence CSS: : après élément de pseudo