これは何
CSSで装飾をスタイリングするときにbeforeなどを使う機会は多いですよね
記事の分かりやすさとしてbeforeだけを例に挙げていますが、afterやfirst-lineでも全く同じことが当てはまります
::beforeでも:beforeでも同じ動きをするんですが、それらがどう違うのかをまとめまた記事です
正しさで言えば::beforeの方が正しい
CSSには疑似要素と疑似クラスという概念があります。
それぞれの詳細な説明は省きますが、特定の要素や状態に対してのみスタイリングを施せて便利ですね。
疑似要素（例としてbefore）
.class::before {
/* スタイルを書く */
}
疑似クラス（例としてhover）
.class:hover {
/* スタイルを書く */
}
記事タイトルに挙げたbeforeは疑似要素なので、コロン2つの::beforeが正しいです。
なんで:beforeでも動くのか？
昔のCSSでは疑似要素と疑似クラスはどちらもコロン1つの記法でした。
しかしCSS3になってからは両者を区別しやすくするために、疑似要素はコロン2つの記法が導入されました。
後方互換性を保つために、コロン1つの記法が今でもサポートされていて問題なく動きます。
ただしあくまでサポートされているだけなので、あえてコロン1つの:beforeを使う理由はありません。
参考
↧