and to change slides. 2 for comments.

CSS: from Knowledgable to Ninja

◈ Estelle Weyl


Part 3: 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

Try it out

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;

attr() - FUTURE

CSS 2.1

attr( attrName )


attr( attrName unit? [ , fallback ]? )
contents of a CSS string. Default is the empty string.
Must parse as a readable color. Default is ‘currentColor’.
Default is ‘about:invalid’. Relative URLs will be made absolute, not relative to the style sheet.
Default is ‘0’
Default is ‘0’
length, angle, time or frequency
Default is ‘0’ in the relevant units. If the unit is a relative length, it will be computed to an absolute length.
length or unit token
'em’ ‘ex’ ‘px’ ‘rem’ ‘vw’ ‘vh’ ‘vmin’ ‘vmax’ ‘mm’ ‘cm’ ‘in’ ‘pt’ ‘pc’ ‘deg’ ‘grad’ ‘rad’ ‘ms’ ‘s’ ‘Hz’ ‘kHz’ or ‘%'. If the unit is a relative length, it will be computed to an absolute length.
<p data-count="5">Hi</p>

width: attr(data-count em, auto);

Try it out

Try it out

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;

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

Part 4:
Media Queries


Next ➹