path: root/files/de/web/css/content/index.html

---
title: content
slug: Web/CSS/content
tags:
  - CSS
  - CSS Eigenschaft
  - Referenz
translation_of: Web/CSS/content
---
<p>{{ CSSRef() }}</p>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Die <code>content</code> CSS Eigenschaft wird mit {{ cssxref("::before") }} und {{ cssxref("::after") }} Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in <code>content</code> eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe:<em> <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">replaced elements</a>.</em></p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("content")}}
</pre>

<pre>content: normal                                /* Keywords die nicht mit anderen Werten kombiniert werden können */
content: none

content: 'prefix'                              /* &lt;string&gt; Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &amp;nbsp; */
content: url(http://www.example.com/test.html) /* &lt;uri&gt; <span style="font-size: 1rem;">Wert</span><span style="font-size: 1rem;"> */</span>
content: chapter_counter                       /* &lt;counter&gt; <span style="font-size: 1rem;">Werte</span><span style="font-size: 1rem;"> */</span>
content: attr(value string)                    /* attr() Wert verbunden mit dem HTML Attribut Wert */
content: open-quote                            /* Sprach- und positionsabhängige Keywords */
content: close-quote
content: no-open-quote
content: no-close-quote

content: open-quote chapter_counter            /* Außer für normal und none, können mehrere Werte gleichzeitig verwendet werden */

content: inherit
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Das Pseudo-Element wird nicht erzeugt.</dd>
 <dt><code>normal</code></dt>
 <dd>Berechnet auf <code>none</code> für <code>:before</code> und <code>:after</code> Pseudo-elemente.</dd>
 <dt>&lt;string&gt;</dt>
 <dd>Text Inhalt.</dd>
 <dt>&lt;uri&gt;<code> url()</code></dt>
 <dd>Der Wert ist ein URI, die eine externe Ressource bezeichnet (beispielsweise ein Bild). Wenn die Ressource oder das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.</dd>
 <dt>&lt;counter&gt;</dt>
 <dd>Die Zähler (Counters) können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Ersteres hat zwei Formen: 'counter(name) "oder" counter(name, style). Der erzeugte Text ist der Wert des counter innersten, im Scope dieses Pseudoelements; es wird in der angegebenen Art ('dezimal' als Standard) formatiert. Die letztere Funktion hat auch zwei Formen: "counter(name, string) 'oder' counters(name, string, style) '. Der erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Scope dieses Pseudoelements, von außen nach innen, durch den angegebenen String getrennt. Die counter werden in der angegebenen Art ('dezimal' als Standard) wiedergegeben. Siehe den Abschnitt über automatische Counter und Nummerierung für weitere Informationen. Der Name darf nicht "none", "inherit" oder "initial" sein. Ein solcher Name bewirkt, dass die Deklaration ignoriert wird.</dd>
 <dt><code>attr(X)</code></dt>
 <dd>Gibt den Wert des Elementen Attributes X als String zurück. Gibt es kein Attribut X wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung von Attributnamen hängt von der Dokumentsprache ab.</dd>
 <dt><code>open-quote</code> | <code>close-quote</code></dt>
 <dd>Diese Werte werden durch die entsprechende Zeichenfolge aus der {{ cssxref("quotes") }} Eigenschaft ersetzt. </dd>
 <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
 <dd>Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Code_sample_-_headings_and_quotes" name="Code_sample_-_headings_and_quotes">Code Beispiele - Überschriften und Zitate</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
&lt;p&gt; We shall start this with a quote from Sir Tim Berners-Lee,
    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
&lt;/p&gt;

&lt;h1&gt;6&lt;/h1&gt;
&lt;p&gt; Here we shall quote the Mozilla Manifesto,
    &lt;q cite="http://www.mozilla.org/en-US/about/manifesto/"&gt;
        Individuals must have the ability to shape the Internet and their own experiences on the Internet.&lt;/q&gt; And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">q {
    color: #00008B;
    font-style: italic;
}

q::before   { content: open-quote }
q::after    { content: close-quote }

h1::before  { content: "Chapter "; }</pre>

<h4 id="Ausgabe">Ausgabe</h4>

<p>{{ EmbedLiveSample('Code_sample_-_headings_and_quotes', 460, 100) }}</p>

<h3 id="Code_sample_-_content_with_multiple_values" name="Code_sample_-_content_with_multiple_values">Code sample - content with multiple values adding an icon before a link</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;a href="http://www.mozilla.org/en-US/"&gt;Home Page&lt;/a&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">a::before{
    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
    font:    x-small Arial,freeSans,sans-serif;
    color:   gray;
}</pre>

<h4 id="Ausgabe_2">Ausgabe</h4>

<p>{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}</p>

<h3 id="Code_sample_-_adding_an_icon_after_text" name="Code_sample_-_adding_an_icon_after_text">Code sample - adding an icon after text in a custom list</h3>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;div&gt;
  &lt;ul class="brightIdea"&gt;
    &lt;li&gt;This is my first idea&lt;/li&gt;
    &lt;li&gt;and another good idea&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css">/* first import the icon from a suitable site */
@import url(http://weloveiconfonts.com/api/?family=entypo);

.brightIdea li::after{
    content: '\1f4a1';
    font-family: 'entypo', sans-serif;
}</pre>

<h4 id="Ausgabe_3">Ausgabe</h4>

<p>{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text', 300, 100) }}</p>

<h3 id="Code_sample_-_class_based_example" name="Code_sample_-_class_based_example">Code sample - class based example</h3>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html">&lt;h2&gt;Paperback best sellers&lt;/h2&gt;
&lt;ol&gt;
    &lt;li&gt;Political thriller&lt;/li&gt;
    &lt;li class="newEntry"&gt;Halloween Stories&lt;/li&gt;
    &lt;li&gt;My Biography&lt;/li&gt;
    &lt;li class="newEntry"&gt;Vampire Romance&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="CSS_4">CSS</h4>

<pre class="brush: css">/* use a class rather that an element selector to give more flexibility.
Simple string example, but don't forget add a leading space in the text string
for spacing purposes  */

.newEntry::after {
    content: " New!";
    color: red;
}</pre>

<h4 id="Ausgabe_4">Ausgabe</h4>

<p>{{ EmbedLiveSample('Code_sample_-_class_based_example', 300, 200) }}</p>

<h3 id="Code_sample_-_rich_link_styling" name="Code_sample_-_rich_link_styling">Code sample - rich link styling</h3>

<h4 id="HTML_5">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
    &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
        Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
        Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="w3c" href="http://www.w3c.org/"&gt;
        World Wide Web Consortium&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="CSS_5">CSS</h4>

<pre class="brush: css">a {
    text-decoration: none;
    border-bottom: 3px dotted navy;
}

a::after {
    content: " (" attr(id) ")";
}

#moz::before {
    content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ;
}

#mdn::before {
    content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ;
}

#w3c::before {
    content:url(http://w3c.org/2008/site/images/favicon.ico) ;
}

li {
    margin: 1em;
}

</pre>

<h4 id="Ausgabe_5">Ausgabe</h4>

<p>{{ EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200) }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS2.1', 'generate.html#content', 'content') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>

<p>{{Compat("css.properties.content")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}</li>
</ul>