Course Outline

Generated Content

::before and ::after

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

<p>the content</p>

the content

<p>
    <before>before content - </before>
        the content
    <after> - after content</after>
</p>

Try it out

Pseudo Elements

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

Content

Syntax

 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
CopyPasteCharacter.com

Calculator

Values for content:

none: Same as no content property declared.
normal: Same as no content property declared.
string: A string of text. Can be combined with URL, counter, attr(x), quotes, etc.
image: URL of a resource, usual an image
counter: '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.
attr(X): Displays the value of the attribute 'X'

body {counter-reset: sections;}
header h1.sectiontitle:before{
	content: "Part " counter(sections) ": ";
	counter-increment: sections;	
}

Tutorial

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;
   line-height:1;     
}

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

More uses

<blockquote>
  <p>With generated content you can create text effects.</p>
  <p>We'll cover other uses next.</p>
</blockquote>

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.

Quotes

This is a quote✍

.quote {
    border-radius: 10px;
    position:relative;
    padding: 20px;
    background-color: red;
    color: white;
}
.quote:after {
    position:absolute;
    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,.thought:before,
.thought:after  {
  border-radius: 50%;
  border: 5px solid blue;
  background-color: white;
  position:relative;
}
.thought:before, 
.thought:after {
  content: '';
  position:absolute;
  left: 20%; bottom: -30px;
  height: 40px; width: 40px; 
}
.thought:after {
  left: 12%; bottom: -50px; 
  height: 20px; width: 20px;
}

Shapes

Visit Site

Other ideas