CSS-Eigenschaft: content, Kategorien: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Basic User Interface (CSS 3), Generated and Replaced Content (CSS 3)
Erzeugt Content
Fügt Inhalte vor oder hinter HTML-Elemente ein oder unterdrückt automatisch generierten Content.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Erzeugt Content |
| normal |
Verwandte Eigenschaften aus der Kategorie: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Basic User Interface (CSS 3), Generated and Replaced Content (CSS 3):
Folgendes ist beim Einsatz von content zu beachten:
- content wirkt ausschließlich in Kombination mit einem der Pseudo-Attribute :before oder :after. Je nach Pseudo-Attribut wird der "erzeugte Inhalt" vor oder hinter das relevante Element eingefügt.
- Als string kann Text eingefügt werden. Dieser wird in einfachen oder doppelten Anführungszeichen notiert. HTML-Elemente können dabei nicht angegeben werden (wie im Beispiel Nr. 8 zu sehen), sondern werden als reine Text-Elemente eingefügt, ohne vom Browser geparst zu werden.
- Über den Parameter url() und der Angabe einer Grafik können Grafiken vor oder hinter ein HTML-Element ausgespielt werden.
- Über die Eigenschaften open-quote und close-quote werden Anführungszeichen vor und hinter das relevante HTML-Element eingefügt. Es sollte open-quote mit :before und close-quote mit :after kombiniert werden. Setzt man open-quote mit :after ein, kommt es trotzdem zu einer Darstellung, diese ist jedoch nicht stabil.
- Die Parameter no-open-quote und no-close-quote blenden automatisch generierte Anführungszeichen, wie sie beim <q>-Tag angezeigt werden, wieder aus. Im Gegensatz zu den hinzufügenden Quote-Parametern können no-open-quote und no-close-quote mit :before und :after kombiniert werden, beide Pseudo-Attribute blenden bei Angabe eines Parameter no-open-quote oder no-close-quote die Anführungszeichen aus. Allerdings sollte man die Eigenschaft zielgerichtet einsetzen, um einen zukunftsicheren HTML-Code zu erstellen.
- Über den Parameter counter wird eine automatische Nummerierung hinzugefügt. Diese ist über weitere CSS-Eigenschaften steuerbar. Der Start des Zählers wird über counter-reset angegeben, die Zählschritte können über counter-increment variiert werden. Beide Parameter, Start und Zählerschritte können also individuell bestimmt werden. Negative Werte sind für beide Parameter erlaubt.
- Über den Parameter att(<identifier>) kann der Wert eines Attributs des HTML-Elements übernommen und als generierter Content hinzugefügt werden.
Die Schreibweise ist etwas ungewohnt. Dieser Parameter kann mit weitern string-Angaben kombiniert werden, der Text bzw. die Zeichen müssen in Anführungszeichen stehen, der Parameter attr() selber darf nicht in Quotes stehen. Zwischen string und attr() ist kein Zeichen für die sogenannte "Konkatenation", also einem Verbindungszeichen, wie es in PHP (der .) oder in JavaScript (das +), notwendig ist. Die einzelnen Elemente werden einfach hintereinander geschrieben. - Auf die eingefügten Elemente können wie auf alle andere HTML-Elemente CSS-Eigenschaften angewendet werden, wie in den Beispielen an der Angabe von Farbe oder bei eingefügten Grafiken die Abstände.
- Diese Ausspielung selber entsprich der normalen Darstellung von HTML, allerdings geht dieser verloren, wenn man Bereiche der HTML-Ausspielung kopiert und in andere Dokumente eingefügt wird.
- CSS3 hat diese Eigenschaft umfangreich erweitert, eine Beschreibung dazu folgt.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu content:
- W3C Spezifikation:
http://www.w3.org/TR/2003/WD-css3-content-20030514/#content
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
columns - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
counter-increment
Beispiele
HTML:
<div class="doPseudo">
<h1>Eine Headlinie</h1>
</div>
CSS:
.doPseudo h1:before {
content: 'VORNE - ';
}
.doPseudo h1:after {
content: " - HINTEN";
}
/* Vor und hinter den Text der H1 wird Text eingefügt. Dabei werden beide Texte nicht vor bzw. hinter das H1-Tag eingefügt, sondern werden Teil der H1.*/
Beispiel Nr. 1 So sieht's aus:
Eine Headlinie
HTML:
<div class="doQuotes">
<h1>Eine Headlinie</h1>
</div>
CSS:
.doQuotes h1:before {
content: open-quote;
}
.doQuotes h1:after {
content: close-quote;
}
/* Über open-quote und close-quote werden Anführungszeichen generiert. */
Beispiel Nr. 2 So sieht's aus:
Eine Headlinie
HTML:
<div class="doUrl">
<h1>Eine Headlinie</h1>
</div>
CSS:
.doUrl h1:before {
content: url('/img/ball.png');
margin-right: 15px;
}
.doUrl h1:after {
content: url('/img/ball.png');
margin-left: 15px;
}
/* In diesem Beispiel werden Grafiken angezeigt. Auf diese können weitere CSS-Eigenschaften - wie hier das margin - angewendet werden. */
Beispiel Nr. 3 So sieht's aus:
Eine Headlinie
HTML:
<p>
<q>Achtung, jetzt kommt ein Zitat!</q>
</p>
<p>
<q class="doIgn">Achtung, jetzt kommt ein Zitat!</q>
</p>
CSS:
.doIgn:before {
content: no-open-quote;
}
.doIgn:after {
content: no-close-quote;
}
/* Per Default ausgespielte Anführungszeichen, wie beim <q>-Tag, werden über no-open-quote und no-close-quote wieder ausgeblendet. */
Beispiel Nr. 4 So sieht's aus:
Achtung, jetzt kommt ein Zitat!
Achtung, jetzt kommt ein Zitat!
HTML:
<p>
<q>Achtung, jetzt kommt ein Zitat!</q>
</p>
<p>
<q class="doIgnEgal">Achtung, jetzt kommt ein Zitat!</q>
</p>
CSS:
.doIgnEgal:after {
content: no-open-quote;
}
/* Ein no-open-quote wirkt auch auf das hintere Anführungszeichen */
Beispiel Nr. 5 So sieht's aus:
Achtung, jetzt kommt ein Zitat!
Achtung, jetzt kommt ein Zitat!
HTML:
<div class="doCounter">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
</div>
CSS:
div.doCounter {
counter-reset: var -20;
}
div.doCounter p {
counter-increment: var -2;
}
.doCounter p:before {
content: "Nr. " counter(var) ": ";
color: red;
font-weight: 700;
font-family: verdana;
font-size: 15pt;
}
/* In Kombination mit content-reset und content-increment können Nummerierungen hinzugefügt werden. In diesem Beispiel greifen weitere CSS-Eigenschaften, um den generierten Content zu gestalten. */
Beispiel Nr. 6 So sieht's aus:
eins
zwei
drei
vier
fünf
HTML:
<div>
<a href="http://daik.de" title="zur Seite des Autor">Webdesigner's Seite</a>
</div>
<hr>
<div class="doAttr">
<a href="http://daik.de" title="zur Seite des Autor">Webdesigner's Seite</a>
</div>
CSS:
.doAttr a:before {
content: "Linkziel: "attr(href) "";
color: black;
font-size: 12px;
display: block;
}
.doAttr a:after {
content: " ["attr(title)"]";
}
/* Hier werden die Attribute des Links verwendet, um diese als generierten Content auszuspielen. Ohne den generierten Inhalt sieht der Link wie der obere aus. */
HTML:
<div class="doHtmlString">
<p>Ein kurzer Text</p>
</div>
CSS:
.doHtmlString p:before {
content: "";
}
.doHtmlString p:after {
content: "";
}
/* Generierter Inhalt wird nicht geparst. Man kann also keine HTML-Tags übergeben, diese werden also wie die Zeichen selber ausgespielt. */
Beispiel Nr. 8 So sieht's aus:
Ein kurzer Text
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!