Beispiel
Das folgende Beispiel fügt die URL in Klammern hinter jedem Link:
a:after
{
content: " (" attr(href) ")";
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Der Inhalt Eigenschaft wird mit dem Einsatz: before und: after Pseudo-Elemente, zu generierte Inhalte einfügen.
| Standardwert: | normal |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript-Syntax: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Note: IE8 unterstützt nur den Inhalt Eigenschaft , wenn ein DOCTYPE angegeben ist!.
CSS-Syntax
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Beispiel |
|---|---|---|
| normal | Standardwert. Legt den Inhalt, falls angegeben, normal, die Vorgabe ist "none" (which is nothing) anderes (which is nothing) | Try it » |
| none | Stellt den Inhalt, wenn angegeben wird, so gut wie nichts | Try it » |
| counter | Legt den Inhalt als Gegen | Try it » |
| attr (attribute) | Legt den Inhalt als eine der selector's Attribut | Try it » |
| string | Legt den Inhalt an den Text, den Sie angeben | Try it » |
| open-quote | Legt den Inhalt eine Öffnung Zitat zu sein | Try it » |
| close-quote | Legt den Inhalt ein Schlusssatz zu sein | Try it » |
| no-open-quote | Entfernt die Öffnung Zitat aus dem Inhalt, falls angegeben | Try it » |
| no-close-quote | Entfernt das Schließen Zitat aus dem Inhalt, falls angegeben | Try it » |
| url( url ) | Setzt den Inhalt eine Art von Medien zu sein (an image, a sound, a video, etc.) | Try it » |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Wie man Kugel Farben für addieren <ul> oder <ol> , indem ihre Standard - Bullets und das Hinzufügen einer HTML - Entität , die wie Kugeln aussieht (•) :
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 */
} Versuch es selber " Verwandte Seiten
CSS - Referenz: : vor Pseudo-Element
CSS - Referenz: : Nach dem Pseudoelement