CSSで見かける疑似要素:beforeと::before の違いってなに?

CSSで良く見かける「:before」「:after」の疑似要素。
使い方やサンプル探しで「:before」と記述しているものと「::before」と記述しているもの、「:」が1つの場合と2つの場合があると思います。どっちで入れても問題なく動くし。。。
これってパスの記述の様に何か違いがあるのでしょうか。

beforeやafterの前につく「:」と「::」の違い

beforeやafterの前にく「:」が1つと2つの違い、これはCSSのバージョンの違いになります。
「:before」「:after」とコロン1つの場合の方が見慣れていると思いますが、このバージョンはCSS2になります。
CSS3になってから「::before」「::after」とコロンが2つ付く様になりました。

  • 「:before」「:after」→CSS2
  • 「::before」「::after」→CSS3

コロンは2つじゃなきゃダメなの?

今までの様にCSS2を使うのであれば1つで問題ありません。
ですがこれからCSS3が通常になり、これからもバージョンが上がっていく事を考えるとCSS3で作成していく方が良いでしょう。
IE8(多分もう無いでしょうけど・・・)は適応になりませんので、ご注意ください。

まとめ

やっと意味が解りました。
これを機にCSS3勉強します。。。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!