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"
        >Permalink</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="#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: "Foo bar";'
          >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: "Foo bar";
      }
    </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>