index.html

--- layout: single property_name: content ---<section id="content" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/content/" data-property-name="content" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="content">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#content"><span>#</span>content</a></h2><div class="property-description"><p>Defines the text content of the <code>:before</code> and <code>:after</code> pseudo-elements.</p></div></header><style type="text/css">.content p:before { content: normal; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="content: normal;">content: normal;</code></p><div class="example-description"><p>No content is added to the element.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div content" id="content-normal"><p data-something="cssreference">Hello world</p></div></div></aside><style type="text/css">#content-normal{ content:normal;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="content: &quot;Foo bar&quot;;">content: &quot;Foo bar&quot;;</code></p><div class="example-description"><p>Considering this HTML element:</p><pre>&lt;p class="element"&gt;
  Hello world
&lt;/p&gt;</pre><p>And this CSS:</p><pre>.element:before {
  content: "Foo bar";
}</pre><p>The text content will be <strong>prepended</strong> to the element&#39;s content.</p><p>Notice how the end result <em>combines</em> text from the HTML and text from the CSS.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div content" id="content-foo-bar"><p data-something="cssreference">Hello world</p></div></div></aside><style type="text/css">#content-foo-bar{ content:&quot;Foo bar&quot;;}</style><style type="text/css">#content-foo-bar p:before { content: "Foo bar"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="content: url(/images/jt.png);">content: url(/images/jt.png);</code></p><div class="example-description"><p>You can insert <strong>images</strong> by using the <code>url()</code> function.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div content" id="content-urlimagesjtpng"><p data-something="cssreference">Hello world</p></div></div></aside><style type="text/css">#content-urlimagesjtpng p:before { content: url(/images/jt.png); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="content: attr(data-something);">content: attr(data-something);</code></p><div class="example-description"><p>Considering this HTML element:</p><pre>&lt;p class="element" data-something="cssreference"&gt;
  Hello world
&lt;/p&gt;</pre><p>And this CSS:</p><pre>.element:before {
  content: attr(data-something);
}</pre><p>The element will grab the text content from the HTML <strong>attribute</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div content" id="content-attrdata-something"><p data-something="cssreference">Hello world</p></div></div></aside><style type="text/css">#content-attrdata-something{ content:attr(data-something);}</style><style type="text/css">#content-attrdata-something p:before { content: attr(data-something); }</style></section></section>