◆ * は擬似要素に適用されない
◆ *:before,*:after{} とかすればおっけい
  ◆ 親要素を継承するものは :before, :after に指定しなくても適用される 

CSS の 「*」 で全体に box-sizing を border-box にするなどよくやっていますが これだと before などの要素には適用されていないことにいまさら気づきました

簡単に確認するようにこんなコードを用意します
<style>
*{
box-sizing: border-box;
font-family: verdana;
color: white;
}
div,
div:before{
position: fixed;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
border: 10px solid purple;
background: lightpink;
}
div:before{
top: 120px;
display: block;
content: "before";
}
</style>

<div></div>

これを表示させると

before-asterisk

box-sizing が before に適用されていないので before のほうがひとまわり大きいです
font や color は親要素を継承してくれるので before でも効いています
親要素を継承しないものを before で使うことがあまりないから気づかなかったみたい

すべての before にも適用させたいなら
*,
*:before{
    box-sizing: border-box;
}
みたいに *:before もセレクタに含めればおっけい
after にも同じ感じでできます

いつかどこかではまりそうなので覚えておこう



実際の表示はこっち