Generated Content

::before and ::after

p:before {
  content: "before content - ";
  font-weight: bold;
  content: " - after content";
  font-weight: bold;
<p>the content</p>

the content

    <before>before content - </before>
        the content
    <after> - after content</after>
Try it out

Pseudo Elements

You get 2 free stylable faux elements for every non-empty element


 element:before {
 	content: "REQUIRED";
  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 8
 element:before {
    content: '';                  /* empty */
    content: " (.pdf) ";          /* any text */
    content: "\2603";             /* unicode */
    content: " (" attr(href) ")"; /* attributes */
    content: counter(name); 
        counter-increment: name;  /* counters */

Special Character

 element:before {
 	content: "\2603";

Try it out


Values for content:

Same as no content property declared.
Same as no content property declared.
A string of text. Can be combined with URL, counter, attr(x), quotes, etc.
URL of a resource, usual an image
'counter(name), counter(name, style), 'counters(name, string)' or 'counters(name, string, style)'. 'name' is a string, but not 'none', 'inherit' or 'initial'.
open-quote / close-quote
The appropriate string set in the  'quotes' property.
no-open-quote / no-close-quote
Does not include quotes, but increments the level of nesting for quotes.
Displays the value of the attribute 'X'
body {counter-reset: sections;}
header h1.sectiontitle:before{
	content: "Part " counter(sections) ": ";
	counter-increment: sections;	

Simple Use Cases

a:before {
  color: #ffffff;
  background: #000000;
  font-size: 120%;
  padding: 2px 5px;
  display: inline-block;
  width: 1.2em;
  margin-right: 10px;
  text-align: center;
a[href^="mailto:"]:before {
  content: "\2709 ";
a[href^="tel:"]:before {
  content: "\2706";
a[href$="vcs"]:before {
  content: "\231A";

Attribute Values as content

There are exercises, or you can search Google.

a[href^=http]:hover {
   position: relative;
a[href^=http]:hover:after {
   content: attr(href);
   position: absolute;
   top: 1em;
   left: 0;
   background-color: black;
   color: white;
   padding: 3px 5px;

Note: "exercises" is a relative link and google is external

More uses

  <p>With generated content you can create text effects.</p>
  <p>We'll cover other uses next.</p>
blockquote p:before, 
blockquote p:after {
  font-size: 2em;
  color: #C7573A;
  line-height: 0;
  vertical-align: middle; 
blockquote p:first-child:before {
  content: "\275D"; 
  margin: 0 5px 0 -40px;
blockquote p:last-child:after {
  content: "\275E";
  margin: 0 -40px 0 5px;

With generated content you can created text effects.

We'll cover other uses next.


This is a quote

.quote {
    border-radius: 10px;
    padding: 20px;
    background-color: red;
    color: white;
.quote:after {
    content: '';
    width: 0; height:0;
    border: 20px solid tran…
    border-top-color: red;
    bottom:-39px; left:20px;

Thought bubbles

This is a thought bubble

.thought:after  {
  border-radius: 50%;
  border: 5px solid blue;
  background-color: white;
.thought:after {
  content: '';
  left: 20%; bottom: -30px;
  height: 40px; width: 40px; 
.thought:after {
  left: 12%; bottom: -50px; 
  height: 20px; width: 20px;

Try it: Tool Tip

In this section you have learned the general idea of using generated content to create effects and / or to provide additional information. Try hovering over me to find out how awesome generated content can be.

Open up a text editor and try creating a tooltip without looking at the code. But, if you must, the code is attached, or you can check out your web inspector.

Here is one solution

Media Queries

Next ➹