What Is Generated Content?

var test = document.querySelector('#test');
var result   = getComputedStyle(test, ':before').content;
var output = document.querySelector('#output');
output.innerHTML = result;

• See example

Inserting Generated Content

<p>
   <before>Start</before>
      Actual content
   <after>End</after>
</p>

p:before {
   content: "Start";
}

p:after {
   content: "End";
}

• See example

• none, normal The pseudo-content would not be generated.
• <string> This would be a textual string enclosed in quotation marks.
• url() This function enables us to insert an external resource (usually an image), as with thebackground-image property.
• counter(), counters() These functions insert counters (see below for details).
• attr(attribute) This function enables us to insert the value of attribute of a given element.
• open-quote, close-quote, no-open-quote, no-close-quote These values automate the generation of quotation marks.

Inserting Strings

p:before {
   content: "\00A7";
   padding-right: 0.2em;
}

• See example

p:before {
   content: "( " "\00A7" " )";
   padding-right: 0.2em;
}

• See example

Inserting Icons Using Web Fonts

@import url(http://weloveiconfonts.com/api/?family=brandico);

p:before {
   content: "\f303";
   padding-right: 0.3em;
   font-family: 'brandico', sans-serif;
   font-size: 22px;
}

• See example

.icon-twitter:before {
   content: "\f303";
   padding-right: 0.3em;
   font-family: 'brandico', sans-serif;
   font-size: 22px;
}

Inserting Images

a:before {
   content: url(link.png);
   padding-right: 0.2em;
}

• See example

Inserting Attribute Values

a[href]:after {
   content: "( " attr(href) " )";
   padding-left: 0.2em;
   color: #000;
   font: small "Courier New", Courier, monospace;
}

• See example

Inserting Counters

<dl>
   <dt>term</dt>
   <dd>description</dd>
   <dt>term</dt>
   <dd>description</dd>
   <dt>term</dt>
   <dd>description</dd>
</dl>

dl {
   counter-reset: term;
}
dt:before {
   counter-increment: term;
   content: counter(term);
}

• See example

dt:before {
   content: counter(term) ". ";
}

• See example

dt:before {
   content: counter(term);
   padding: 1px 2px;
   margin-right: 0.2em;
   background: #ffc;
   color: #000;
   border: 1px solid #999;
   font-weight: bold;
}

• See example

dl {
   counter-reset: term -1;
}
dt:before {
   counter-increment: term;
   content: counter(term) ". ";
}

• See example

dl {
   counter-reset: term -1;
}
dt:before {
   counter-increment: term 3;
   content: counter(term) ". ";
}

• See example

dl {
   counter-reset: term definition;
}
dt:before {
   counter-increment: term;
   content: counter(term) ". ";
}
dd:before {
   counter-increment: definition;
   content: counter(term) "." counter(definition) " ";
}

• See example

1. increments the second counter (definition) on dd elements;
2. inserts the first counter (term), followed by a period;
3. inserts the second counter (definition), followed by a space.

<ol>
   <li>item</li>
   <li>item
      <ol>
         <li>item</li>
         <li>item</li>
         <li>item
            <ol>
               <li>item</li>
               <li>item</li>
            </ol>
         </li>
      </ol>
   </li>
</ol>

ol {
   counter-reset: item;
   list-style: none;
}
li {
   display: block;
}
li:before {
   counter-increment: item;
   content: counters(item, ".") " ";
}

• See example

1. Its first argument is the name of the given counter, immediately followed by a comma.
2. Its second argument is a period between double quotation marks.

• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• lower-alpha
• upper-alpha

dl {
   counter-reset: term definition;
}
dt:before {
   counter-increment: term;
   content: counter(term, upper-latin) ". ";
}
dd:before {
   counter-increment: definition;
   content: counter(definition, lower-latin) ". ";
}

• See example

li:before {
   counter-increment: item;
   content: counters(item, ".", lower-roman) " ";
}

• See example

Conclusion