【CSS】::before と :before の違い

::before と :before の違いは、CSS の仕様変更によるものです。以下にその違いを説明します。

::before

新しい構文（CSS3以降）です。

擬似要素を示します。

::before を使うことで、要素の前にコンテンツを挿入します。

例:cssコードをコピーするp::before { content: "Prefix: "; }

:before

古い構文（CSS2まで）です。

擬似要素を示しますが、CSS3以降では推奨されません。

依然として多くのブラウザでサポートされていますが、新しいプロジェクトでは ::before を使うことが推奨されます。

例:cssコードをコピーするp:before { content: "Prefix: "; }

違いの要点

• コロンの数:
  • ::before は二重コロンを使います。これは新しいCSS3仕様に従っており、擬似要素を明確に識別するためのものです。
  • :before は一重コロンを使います。これは古いCSS2仕様での書き方です。


::after と :after の違いも ::before と :before の違いと同じ理由に基づいています。

まとめ

新しいプロジェクトやモダンなブラウザ環境では、::before を使用することが推奨されます。これにより、コードが最新の仕様に従い、将来の互換性も確保されます。

まとめると、::before と ::after はCSS3で導入された新しい構文であり、:before と :after はCSS2までの古い構文です。新しいプロジェクトでは新しい構文を使うことが推奨されます。