【CSS】before、afterにスペースを入れて書いちゃった話し☠️

1 min read読了の目安(約600字

最近CSSの勉強をしていてものすごく困ったことがあったので記事にします

結論から書くと、before・afterを書く時にスペースは使っちゃダメです!!
スペースを入れて書くと、子要素にbefore・after要素ができてしまいます

そもそも何でスペースをいれて書いたかというと、CSSを書く時に

main h2{
    background-color: gray;
}

という感じに
親要素を書いてスペースを入れて子要素を書く という方法を覚えたばかりで
これと同じノリで書いてしまいました😭

下は実際に書いていたものを簡略化したもの何ですけど、
headerにはbefore要素が出るのにh2には出ない!何で??🤔とめちゃくちゃ困りました

調べてみたところ、headerの方はスペースがあるせいでheaderではなく子要素のh1にbefore要素ができてしまったようです・・・

当然h2には子要素ないのでbefore要素はできません
そりゃそうですよね😅
スペース消したら普通にbefore要素ができました
これからは絶対にスペース入れて書きません!!