よく使うが、初心者にはわかりずらい［::before/::after］について、なるべく具体的、実践的に説明します。
疑似要素とは？
セレクタに追加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
::before/::afterとは？
要素の直前、直後に様々な内容を挿入する際に使用します。画像やアイコンの挿入や、装飾など様々な要素に使用されます。HTMLに記述せずに、CSSへの記述のみで要素を挿入できます。
CSSへの記述のみで内容を挿入できるので、「::before/::after」を使ってアイコンなどを指定しておけば、例えば一括でアイコンを変更したい場合など、CSSを書き換えるだけで全て差し替えが可能になります。
ちなみに、css2ではコロンが一つ（:before/:after）でしたが、ccs3ではコロンが2つ（::before/::after）になりました。現状、コロンが2つ（::before/::after）で記述しておけば問題ないでしょう。
基本構文
基本的な書き方は以下のようになります。
See the Pen BeforeAfterSample01 by muko (@mkpn) on CodePen.
[Content:" "; ]部分には『テキスト』や『URL(画像へのパス)』などが入ります。（空でも可）
z-indexを指定しなければ、重ね順は下記のように下から[背景 → ::before → ::after]となります。
See the Pen BeforeAfterSample02 by muko (@mkpn) on CodePen.
テキストに::before/::after（文頭、文末にアイコンとして使う）
See the Pen BeforeAfterSample03 by muko (@mkpn) on CodePen.
contentに画像をパスで指定して読み込む。
See the Pen BeforeAfterSample04 by muko (@mkpn) on CodePen.
backgroudとして読み込む。背景として読み込んでいるので、[background-size: contain;]を指定することで、アイコンの大きさをcssで調整してます。
ボタンに::before/::after
See the Pen BeforeAfterSample05 by muko (@mkpn) on CodePen.
ボタンの中のテキストの文頭にアイコンを置くパターンと、ボタンの右端にアイコンを置くパターンの2パターンです。文頭に置くパターンのモノは、[display]が[inline-block]になっているところがポイントです。
画像に::before/::after
See the Pen BeforeAfterSample06 by muko (@mkpn) on CodePen.
よくある画像の上に[NEW]などのチップを置くパターンと、画像の下に少しずらして色を敷くパターン。
