buttonタグに擬似要素をつけたいのにつけれない！？
擬似要素ってすごく便利ですよね！
冒頭の画像や補足文とかいろいろな場面で使うところあるとおもいます。
ですが急に擬似要素が反映されない場面ってありませんでしたでしょうか？
そんな方に向けて解説していきますね！
目次
input要素など「置換要素」には擬似要素は使えない！！
擬似要素で主につまづく原因
擬似要素で主につまづく点として
- content=””;の入れ忘れ
- 擬似要素はinline要素のため、height指定しても高さが出ない
- position:abslute;を使用しているけど、親要素にposition:relative;がはいっていない
上記がよく反映されない原因ですが「置換要素」はそもそも擬似要素が使えません。
代表例でいうと<img>要素や<br>要素です。
答えは別の要素でラップしてあげるだけ
答えは簡単で置換要素の周りをdivなどの別の要素でラップしてあげて擬似要素をつけるだけです！
See the Pen Untitled by yoppi (@yoppi) on CodePen.
ボタン系は特にアニメーションつけるために擬似要素を使用することが多いと思います。
そういうときにこの方法をすればよいかと！