content

von 1 Mitwirkenden:

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Zusammenfassung

Die content CSS Eigenschaft wird mit ::before und ::after Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in content eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe: replaced elements.

  • Initialwert normal
  • Anwendbar auf ::before und::after pseudo-Elemente
  • Vererbt Nein
  • Prozentwerte
  • Medium alle
  • Berechneter Wert On Elemente, always computes to normal. On ::before und::after, if normal ist specified, computes to none. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
  • Animierbar Nein
  • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+
content: normal                                /* Keywords die nicht mit anderen Werten kombiniert werden können */
content: none

content: 'prefix'                              /* <string> Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &nbsp; */
content: url(http://www.example.com/test.html) /* <uri> Wert */
content: chapter_counter                       /* <counter> Werte */
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

Werte

none
Das Pseudo-Element wird nicht erzeugt.
normal
Berechnet auf none für :before und :after Pseudo-elemente.
<string>
Text Inhalt.
<uri> url()
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.
<counter>
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.
attr(X)
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.
open-quote | close-quote
Diese Werte werden durch die entsprechende Zeichenfolge aus der quotes Eigenschaft ersetzt. 
no-open-quote | no-close-quote
Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.

Beispiele

Code Beispiele - Überschriften und Zitate

HTML Content

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

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

CSS Content

q {
    color: #00008B;
    font-style: italic;
}

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

h1::before  { content: "Chapter "; }

Output

Code sample - content with multiple values adding an icon before a link

HTML Content

<a href="http://www.mozilla.org/en-US/">Home Page</a>

CSS Content

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

Output

Code sample - adding an icon after text in a custom list

HTML Content

<div>
  <ul class="brightIdea">
    <li>This is my first idea</li>
    <li>and another good idea</li>
  </ul>
</div>

CSS Content

/* 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;
}

Output

Code sample - class based example

HTML Content

<h2>Paperback best sellers</h2>
<ol>
    <li>Political thriller</li>
    <li class="newEntry">Halloween Stories</li>
    <li>My Biography</li>    
    <li class="newEntry">Vampire Romance</li>
</ol>

CSS Content

/* 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;
}

Output

HTML Content

<ul>
    <li><a id="moz" href="http://www.mozilla.org/">
        Mozilla Home Page</a></li>
    <li><a id="mdn" href="https://developer.mozilla.org/">
        Mozilla Developer Network</a></li>
    <li><a id="w3c" href="http://www.w3c.org/">
        World Wide Web Consortium</a></li>
</ul>

CSS Content

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;
}

Output

Specifications

Specification Status Comment
CSS Level 2 (Revision 1)
Die Definition von 'content' in dieser Spezifikation.
Empfehlung  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 oder früher) 8.0 4.0 1.0
url() support 1.0 1.0 (1.7 oder früher) 8.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) 8.0 9.5 1.0

See also

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: webdesignberlin
Zuletzt aktualisiert von: webdesignberlin,