CSS: from Knowledgable to Ninja

◈ Estelle Weyl

Course Outline

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

attr() - FUTURE

CSS 2.1

attr( attrName )

CSS3

attr( attrName unit? [ , fallback ]? )

string: contents of a CSS string. Default is the empty string.
color: Must parse as a readable color. Default is ‘currentColor’.
url: Default is ‘about:invalid’. Relative URLs will be made absolute, not relative to the style sheet.
integer: Default is ‘0’
number: 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

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;
}

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

Visit Site

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

(briefly)

Next ➹