Use CSS transitions for pseudo-elements right now

Slides for the talk, given at Fronteers Jam Sessions in 2012 by Roman Komarov

Use CSS transitions for pseudo-elements right now

Roman Komarov

I like CSS experiments

Sometimes you want to do everything just on one element…

…and use transitions there

Like that

.foo:before {    top: 0;    transition: top .3s;    }.foo:hover:before {    top: 100px;    }

The problem is

Only Firefox supports transitions for pseudo-elements

But. There is a workaround.

More on it later, it’s demo time!

Width and height

Original element

Positioning

Original element

Clip

Original element

Color

Original element

Background

Original element

Tooltips

Some link, And another one, Links everywhere.

…Those were just single HTML elements, yep.

So, the first part of solution is…

inherit

inherit

1. Add transition for some property on the element

2. Inherit this property on the pseudo-element

3. Change the value on the parent

4. ???????

Well, it works! But…

…we don’t want to change the value on the parent!

This is where the second part of solution comes:

CSS is AWESOME

One single CSS property is lonely and somewhat dull

Multiple properties conjure magic

(Magic, described in the specs, btw)

1. Properties with sub-properties, like background

2. “Limiting” properties, like min-width

3. Using text-shadow instead of color for text

4. Using another pseudo as the actual content

5. And so on…

Not every property can be “limited” only to pseudos that way

No opacity or transform for you. Sorry.

So, tell browsers to implement transitions for pseudo-elements like Firefox did

And experiment with the CSS in the meantime!

Thank you!