This post will take less than a minute to read.
Using inherit to save repetition
I’ve been using the inherit value a lot more recently; it can easily reduce the amount of repetition in your style sheet. Here’s a basic example of what I am talking about. As you can see, when changing the values on the
.foo element, the pseudo-element also changes accordingly. Here is another example.
Bonus transition trick
At the moment, only Firefox supports transitions on pseudo-elements, but by making full use of inherit, we can trick other browsers into doing the same. Here is a demonstration of how this works, and here is a more practicle example.