[CSS]::before,::after疑似要素にtransformが効かない時

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

「灯台下暗し」とはよく言ったもんで、コーディングでもさんざん悩んだ挙句、「こんなことに気付かなかったとは…」とヘタレな自分に絶望することが週に1,2回あります。

今回はそんな日々から得た小ネタを一つ。

疑似要素がtransform（変形）してくれない

これはですね、もうほんとに大したことのない事なんですが…

その疑似要素、インラインのままじゃない？

ってことです。

疑似要素はデフォルトでインライン要素です。

つまりdisplayプロパティで他の値を指定しない限り、display:inline の状態となるわけですね。

ココがまずポイント1。

ほんで次が肝です。

transformはインライン要素には適応しない

っていう仕様です。

言われてみればそんなことかって話ですわ。。

spanとかなら比較的気付きやすいんだけど、疑似要素だとなかなかここら辺気付きにくかったりします。

結論としては、

transformしたい疑似要素はdisplayの値をinline以外にしようね

ってことでした。