CSS: Generated Content

Generated Content
Generated Content: quotes
content: <image>
Generated Content: Attribute Values
position property
Generated Content: Counters
Generated Content: Strings
Special Characters
Accessibility
Design Elements
Exercise

estelle.github.io/css/generated

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

Doesn't apply to replaced elements like <img> and <br>.

Syntax

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

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

Objects inserted using the content property are anonymous replaced elements.

`content` property

content: value;

none / normal: Same as no content property declared.
<image>: URL of a resource, usual an image
counter() / counters(): 'counter(name), counter(name, style), 'counters(name, string)' or 'counters(name, string, style)'. 'name' is a string, but not 'none', 'inherit' or 'initial'.
string: A string of text. Can be combined with URL, counter, attr(x), quotes, etc.
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'

content: value;

content: none;
content: normal;
content: "string of text";
content: url(path/image.jpg);

content: counter(mycounter, lower-roman);
content: counters(mycounter, '.', upper-roman);

content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

content: attr(href)
content: url(path/email.png) " " attr(title);

content: inherit;
content: initial;
content: unset;

content: value;

content: none
content: normal
content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote;
content: <image>
content: attr()
content: counter() content: counters()
content: <string>
Examples

`content: none`

none

content: none;

Acts as display: none; on pseudo-elements

Basically, gets rid of the generated content if there was any added.

`content: normal`

normal

content: normal;

For ::before and ::after it's the same as none.

For ::marker it's as if no content was defined, as if set to initial.

For DOM elements, computes to contents, as if not set at all.

Generated Content: quotes

`content` and `quote` properties

Quotes are a two step process: definte the quote property, then use open-quote and close-quote as values for the content property.

/* Example: Pairs of quotes for two levels in three languages */
:lang(en) > q { quotes: '"' '"' "'" "'"; }
:lang(fr) > q { quotes: "«" "»" "’" "’"; }
:lang(de) > q { quotes: "«" "»" "‹" "›"; }

/* Insert quotes before and after <q> element's content */
q::before { content: open-quote }
q::after  { content: close-quote }

They'll alternate, even if they're on different elements

Play Time

Try it out

Codepen.io

no-close-quote

Codepen.io

content: <image>

Try it out

text is not parsed.

Try it out

Generated Content: Attribute Values

content: attr( attrname );

Attribute Values as content

This is a local link, and this is an external link.

Why relative only on hover?

This is a local link, and this is an external link.

Play

Open

attr() support

Supported

attr( attrName )

Examples:

@media print {
  a[href^="https://"]::after, 
  a[href^="http://"]::after  {
    content: " ("  attr(href) ")";
  }
}

abbr[title]:hover::after {
  content: attr(title);
  position: absolute; bottom: 0; right: 0;
  background-color: #ccc;
  border: 1px solid;
}

attr() support, or lack thereof

attr( attrName unit? [ , fallback ]? )

See MDN attr() function

<p data-count="5">Hi</p>

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

`position` property

Sets how an element is positioned in a document. top, right, bottom, and left properties determine the final location of positioned (non static) elements.

static | relative | absolute | fixed | sticky

static: Default. Positioned according to the normal flow of the document. top, right, bottom, left, and z-index properties have no effect
relative: Positioned according to the normal flow of the document. Can be offset relative to itself by top, right, bottom, and left. Change in position does not move its siblings. z-index creates a new stacking context.
absolute: The element is removed from the normal document flow. No space is created for the element in the page layout. Positioned relative to its closest positioned ancestor, or the <body> if none, by the top, right, bottom, and left properties. Creates it's own block formatting context. Margins don't collapse. z-index creates a new stacking context.
fixed: Like absolute, element is removed from the normal document flow, positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set. Position is determined by top, right, bottom, and left. When printed, it's placed in the same spot on every page.
sticky: Positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), based on the values of top, right, bottom, and left. Creates a new stacking context. It "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

`position` property

static: Default. Positioned according to the normal flow of the document. top, right, bottom, left, and z-index properties have no effect
relative: Positioned according to the normal flow of the document. Can be offset relative to itself by top, right, bottom, and left. Change in position does not move its siblings. z-index creates a new stacking context.
absolute: The element is removed from the normal document flow. No space is created for the element in the page layout. Positioned relative to its closest positioned ancestor, or the <body> if none, by the top, right, bottom, and left properties. Creates it's own block formatting context. Margins don't collapse. z-index creates a new stacking context.

`position` property

We're interested in absolute, static & relative for right now

If not static, element is considered positioned
If positioned, it has it's own stacking context
If absolute, top, right, bottom, and left properties specify offsets from the edges of the element's containing block.
Containing block is the nearest "positioned" ancestor, or the <body>
If no height/width declared on absolute, top: 0; bottom: 0; left: 0; right: 0 will make it the size of it's parent
else, top overrides bottom and left overrides right.

`top`, `bottom`, `left` & `right` properties

<length> | <percentage> | auto

position: absolute;
Vertical and horizontal positions of element relative to positioned containing block ancestor

position: relative;
Vertical and horizontal positions of element compared to where it would have been otherwise positioned.

position: static;
Has no impact.

`position` property

↪

`position` property

↪

Generated Content: Counters

counter() & counters() styles

counter: counter(counter, style)

counter: counters(counter, string, style)

decimal
cjk-decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-alpha
lower-latin
upper-alpha
upper-latin
arabic-indic
armenian
bengali
cambodian
cjk-earthly-branch
cjk-heavenly-stem
cjk-ideographic
devanagari
ethiopic-numeric
georgian
gujarati
gurmukhi
hebrew
hiragana
hiragana-iroha
japanese-formal
japanese-informal
kannada
katakana
katakana-iroha
khmer
korean-hangul-formal
korean-hanja-formal
korean-hanja-informal
lao
lower-armenian
malayalam
mongolian
myanmar
oriya
persian
simp-chinese-formal
simp-chinese-informal
tamil
telugu
thai
tibetan
trad-chinese-formal
trad-chinese-informal
upper-armenian

Counter

↪

Counter

↪

Counter for this Deck

Elements that aren't displayed ('display: none') can't increment or reset a counter.
Pseudo-elements that aren't generated also don't increment or reset counters

content: counters()

↪

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>

With generated content you can created text effects.

We'll cover other uses next.

Improved UX

a::before {
  font-size: 120%;
  padding: 2px 5px;
  display: inline-block;
  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 pull quote✍

.quote {
    border-radius: 10px; padding: 20px;
    position:relative;
    background-color: red; color: white;
}
.quote::after {
    position:absolute;
    content: '';
    width: 0; height:0;
    border: 20px solid transparent;
    border-top-color: red;
    bottom:-39px; left:20px;
}

Play

Open

Material Design Icons

↪

Icon Fonts

↪

Accessibility

Accessibility of Generated Content

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
Some browsers translate generated content, but not all (yet?)

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

Example

↪

Example

↪

Try it out:

↪

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

Exercise

♥

♣

♦

Let's add a few pseudo selectors we'll use and generate and position content on them. HTML is on the next page.

Make each card 300px tall by 200px wide.
Make the face and the back the same size, and in the same spot
Add two pseudo element selector blocks for the face of each card
Add generated content: the face value
Make that content (the "A" in our current examples, but this should be automatically set), appear twice on the face of the card
Place one of those valies 10 pixels from the upper left hand corner of the face of the card.
Place the other A 10 pixels from the bottom righ hand corner of the face of the card.

Exercise

HTML for our code example

<figure>
  <div class="card" data-type="H">
    <div class="back"></div>
    <div class="face" data-value="A">♥</div>
  </div>
  <div class="card" data-type="C">
    <div class="back"></div>
    <div class="face" data-value="A">♣</div>
  </div>
  <div class="card" data-type="D">
    <div class="back"></div>
   <div class="face" data-value="A">♦</div>
  </div>
</figure>

This page intentionally left blank

Solution

Make each card 300px tall by 200px wide.

.card {
  height: 300px;
  width: 300px;
}

Make the face and the back the same size, and in the same spot

.card {
  height: 300px;
  width: 300px;
  position: relative;
}

Add two pseudo element selector blocks for the face of each card

  .face, 
  .back {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Add generated content: the face value

Make that content (the "A" in our current examples, but this should be automatically set), appear twice on the face of the card

Place one of those valies 10 pixels from the upper left hand corner of the face of the card.

Place the other A 10 pixels from the bottom righ hand corner of the face of the card.

[data-value]:after,
[data-value]:before {
  content: attr(data-value);
  position: absolute;
}
.face::before {
  top: 10px;
  left: 10px;
}
.face::after {
  bottom: 10px;
  right: 10px;
}

estelle.github.io/css/generated

none

normal

Next ➹