and to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

@estellevw

www.standardista.com

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

Try it out

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

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

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 ➹