Getting real with pseudo-elements

And with François Robichet (@calvein)

Overview
Quick definition
Things I'm not going to talk about

Things I won't talk about

But I'm actually talkiing about right now

Pseudo-classes

:active
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover

:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()

:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

http://bit.ly/pseudo-classes

Differences between both

Pseudo-classes selectors, filter stuff to the selected element.

Pseudo-elements, add a fake element to the selected element.

Imagine this HTML

<ul>
    <li>Bonjour
    <li>SydCSS
</ul>

This code will select all the <li>, and then them filter to get the first from the parent.

li:first-child {}

While this one will add an empty element before the content of all the <li>s.

li:before {}

Pseudo-elements

::first-letter
::first-line
::selection
::before
::after

http://bit.ly/pseudo-elements

::first-letter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

::first-line

Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

Both

It's tricky to write about TowerFall Ascension without sounding like a child — mostly because it's a powerful distillery of childlike glee.

I can say, without an ounce of hyperbole, that I have never shouted, cheered or laughed so much playing a game in my life. TowerFall Ascension is designed to evoke these reactions in every single match, and it always, always does. Regardless of how its settings and variables have been tinkered, or the relative skill levels of its players, the matchup is exciting and dynamic every single time.

::selection

Non standard
Only support color, background, background-color and text-shadow
Always needs ::-moz-selection & ::selection

:Before/:after
Before/after needs a content, event empty string
Not on self closing tag element

Content

'string'
url(URI)
attr(ATTR)
counter and quote stuff

Examples

francois@robichet.com

Arrows

by Chris Coyier (@chriscoyier)

Other shapes

Circles

I have a bullet point

Tick

I have a tick

Real life examples

Clearfix

From HTML5 boilerplate, used by Bootstrap.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

Vertical align

I'm aligned Me too

Ribbons

See http://soiheardyouliekribbon.com

Voilà

François Robichet (@calvein)

http://bit.ly/pseudo-elements-talk