Use CSS transitions for pseudo-elements right now

I like CSS experiments

Sometimes you want to do everything just on one element…

…and use transitions there

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

Positioning

Clip

Color

Background

Tooltips

…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!