CSS3: From Knowledgable to Ninja – Part 3 Generated Content

before and after

::before and ::after
before and after are pseudo-elements, essentially you get two free stylable faux elements for every non-empty element.

 
p:before {content:"before content - "; font-weight:bold;}
p:after {content:" - after content"; font-weight:bold;}

<p>the content</p>

before content - the content - after content

syntax

element:before {content:”REQUIRED”;}

Although the content declaration is required, the value can be empty. Below are the values the content declaration accepts.

 
element:before {
  content:'';                    /* empty */
  content:" (.pdf) ";            /* any text */
  content:"\2603";               /* unicode */
  content:" (" attr(href) ")";   /* attributes */
  content:counter(name);
  counter-increment:name;        /* counters */
}

special characters

Copy Paste Character is one example website with lots of characters you can copy, add this with an Entity Conversion Calculator and you’ve got the tools needed to make some generated content.

View the demo

attribute values

You could use this in the print style sheet, generating the URL for all links.

a[href^=http]:after {content:attr(href);}

There are a lot of clever ways you can use generated content. Some of the use cases I’ve seen are quote, speech bubbles and tooltips.