CSSで良く見かける「:before」「:after」の疑似要素。
使い方やサンプル探しで「:before」と記述しているものと「::before」と記述しているもの、「:」が1つの場合と2つの場合があると思います。どっちで入れても問題なく動くし。。。
これってパスの記述の様に何か違いがあるのでしょうか。
beforeやafterの前につく「:」と「::」の違い
a:before{}
a::before{}
/*違いはなぁに？*/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冊ですべて学べる!
