Joshua Hibbert氏の記事、Don’t Forget the CSS Value ‘inherit’ - Joshua Hibbertでは忘れられがちなinheritによる値の継承について説明している。

inheritを使えば親要素のスタイルの継承ができるが、これは要素とその擬似要素の関係においても、擬似要素が継承させることができる。

で、この記事における本題としては、Bonus transition trickとして紹介されている、inheritを使えば、擬似要素でもCSSアニメーションが有効になるという話のこと。

擬似要素では”基本的に”アニメーションが無効となる

Hibbert氏の記事にあるbasic sampleを見てもらうとわかるのだが、右側（赤い方）では擬似要素に大しては継承を使っておらず、そのためアニメーションになっていない。大して一方では擬似要素もアニメーションをしており、該当のスタイルをみるとinheritを使っているのが確認できる。

div {
  border: 2px solid black;
  -webkit-transition: .5s;
  transition: .5s;
}
div:hover {
  /* マウスオーバー時に背景色とボーダーの線の色を変える */
  background: blue;
  border-color: white;
}
.yay {
  background-color: green;
}
.yay:after {
  background-color: inherit; /* 継承 */
  border: inherit; /* 継承 */
}

覚えておいて損はないかも

実務上ではあまりこれにハマることは少ないかもしれないが、同記事の別のサンプルのようなギミックを仕込むときなどには使そう。