content

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.

Initialwertnormal
Anwendbar auf::before und::after Pseudoelemente
VererbtNein
Berechneter WertBei Elementen ist der berechnete Wert immer normal. Falls bei ::before und ::after normal angegeben ist, ist der berechnete Wert none. Ansonsten, f├╝r URI Werte die absolute URI; f├╝r attr() Werte der resultierende String; f├╝r andere Schl├╝sselw├Ârter wie angegeben.
Animationstypdiskret

Syntax

Formal syntax: normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?

wobei
<content-replacement> = <image>
<content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+

wobei
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<quote> = open-quote | close-quote | no-open-quote | no-close-quote
<target> = <target-counter()> | <target-counters()> | <target-text()>
<leader()> = leader( <leader-type> )

wobei
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )
<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )
<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )
<leader-type> = dotted | solid | space | <string>

wobei
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
<counter-style> = <counter-style-name> | symbols()

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
<counter-style-name> = <custom-ident>

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

wobei
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

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

<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

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

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

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

Ausgabe

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

HTML

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

CSS

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

Ausgabe

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

HTML

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

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

Ausgabe

Code sample - class based example

HTML

<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

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

Ausgabe

HTML

<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

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

Ausgabe

Specifications

Browser compatibility

BCD tables only load in the browser

See also