estelle.github.io/cssmastery/generated

◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

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>

element::before {
  /* the only 'required' attribute */
  content: ""; 
 }

element::after {
  /* without "content:", you have no content */
  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;
}

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

/* 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 }

 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 */
 }
 

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

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

Try it out
Calculator

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

• Generated content can enhance but should not change actual content.
• Separation of concerns: content v. presentation.
• generated content is factored into element's accessible name computation
• All browsers except IE exposes generated content

Improved Accessibility (future)

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

Purely decorative

content: "\25BA" / "";

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

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