CSS content-Eigenschaft
Die content-Eigenschaft wird zusammen mit den ::before und ::after Pseudo-Elementen verwendet, um Inhalte innerhalb eines Elements zu generieren. Ohne einen expliziten Wert bleiben die Pseudo-Elemente leer. Die Eigenschaft verfügt über die folgenden Werte:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
INFO
Objekte, die mit der content-Eigenschaft eingefügt werden, sind anonyme ersetzte Elemente. Hinweis: Die quotes-Eigenschaft muss für das Element festgelegt sein, damit open-quote und close-quote tatsächliche Anführungszeichen anzeigen.
| Anfangswert | normal |
|---|---|
| Gilt für | ::before und ::after Pseudo-Elemente. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | element.style.content = "none"; |
Syntax
Syntax der CSS content-Eigenschaft
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;Beispiel für die content-Eigenschaft:
Beispiel der CSS content-Eigenschaft mit dem Wert normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>My name is John</p>
<p class="country">I live in Canada</p>
</body>
</html>Ergebnis
Beispiel für die content-Eigenschaft mit dem Wert „string“:
Beispiel der CSS content-Eigenschaft mit dem Wert string
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "List item";
}
p:after {
content: " with string value.";
}
</style>
</head>
<body>
<h2>Content property example</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Here is some paragraph</p>
</body>
</html>Im folgenden Beispiel können Sie sehen, dass „open-quote“ nicht ohne „close-quote“ erscheinen kann.
Beispiel für die content-Eigenschaft mit dem Wert „open-quote“:
Beispiel der content-Eigenschaft mit den Werten open-quote und close-quote
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
quotes: open-quote close-quote;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>Hello, my name is John</p>
<p>I am from Canada</p>
</body>
</html>Beispiel für die content-Eigenschaft mit den Werten „open-quote“ und „no-close-quote“:
Beispiel der content-Eigenschaft mit den Werten „open-quote“ und „no-close-quote“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Example with content property</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| normal | Legt den Inhalt auf normal fest. Dies ist der Standardwert. |
| none | Legt den Inhalt auf nichts fest. Das Pseudo-Element wird nicht generiert. |
| counter | Legt den Inhalt auf einen Zählerwert fest. |
| attr | Legt den Inhalt auf den Wert eines Attributs des ausgewählten Elements fest. |
| string | Legt den Inhalt auf einen Textstring fest. |
| open-quote | Legt den Inhalt als öffnendes Anführungszeichen fest. |
| close-quote | Legt den Inhalt als schließendes Anführungszeichen fest. |
| no-open-quote | Entfernt das öffnende Anführungszeichen aus dem Inhalt. |
| no-close-quote | Entfernt das schließende Anführungszeichen aus dem Inhalt. |
| url | Legt den Inhalt auf eine URL fest, die auf eine Ressource wie ein Bild, einen Ton oder ein Video verweist. Wenn das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt. |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche verschiedenen CSS-Content-Kategorien können verwendet werden, um die Inhaltsgröße einer Box zu steuern?