and to change slides. 2 for comments. estelle.github.io/cssmastery/generated

CSS: Generated Content

estelle.github.io/cssmastery/generated

◈ Estelle Weyl

@estellevw

www.standardista.com

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 {
  /* the only 'required' attribute */
  content: ""; 
 }

element::after {
  /* without "content:", you have no content */
  content: ""; 
 }

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() support, or lack thereof

Supported

attr( attrName )

Not yet

  • attr( attrName unit? [ , fallback ]? )
  • any use outside of content:
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);

Generated Content: Quotes

Quotes

/* Specify pairs of quotes for two levels in two languages */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(fr) > q { quotes: "«" "»" "’" "’" }

/* Insert quotes before and after Q element content */
q::before { content: open-quote }
q::after  { content: close-quote }

no-close-quote

Codepen.io

Generated Content: Attribute Values

Attribute Values as content

There are local examples, 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;
} 

Play

Open

Generated Content: Counters

Counter

Counter

Counter for this Deck

Generated Content: Images

Play

Open

Generated Content: Strings

Syntax

 element:before {
  content: "REQUIRED";
 }

 element:before {
    content: '';                  /* empty */
    content: " (.pdf) ";          /* any text */
    content: "\2603";             /* unicode */
    content: " (" attr(href) ")"; /* attributes */
    content: counter(name);
        counter-increment: name;  /* counters */
 }
 

Special Characters

Decorative Characters

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

Improved UX

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

Special Character

 element:before {
  content: "\2603";
 }
 

Try it out
Calculator

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

Play

Open

Material Design Icons

Icon Fonts

Icon Fonts

Accessibility

Accessibility of Generated Content

Improved Accessibility (future)

content: url(question.svg) / "More Information";

Purely decorative

content: "\25BA" / "";

Design Elements

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

Media Queries

(briefly)

Next ➹

Links