今回は疑似要素というものの、:beforeや:afterといったものを紹介。
この:beforeや:afterの要素は使う頻度も高く、かなり便利なので覚えてしまいましょう。

この疑似要素は目的の要素の前後に、CSSを使って別の要素を挿入することができるものです。
例えば、ボタンに矢印アイコンを付けたいとき、リストのスタイルにアイコンを使いたいときなどに便利で、
HTMLとしての要素にはアイコンは含まれないけれど、CSSでアイコンを挿入することができるんです。

<a class="button">ボタン</a>
<ul class="icon">
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
</ul>

ソースコードはこのようにシンプルですが、これだけでアイコンも表示できるんです。

See the Pen :before, :after by Yoshimune (@hachidaime) on CodePen.

HTMLを触らなくても、CSSだけで要素を追加できるので、運用上かなりメリットがあります。
HTMLというのは外部から参照して共通化して使いまわしなんてことはできないのですが、
CSSであれば共通のcssとして準備しておけば、あとはクラスを呼び出すだけで簡単にデザインが適用されます。
変更の際にもCSSを1か所変更するだけなので用意ですね。

簡単な例

:beforeや:afterの簡単な例です。
見出しに対して前後に文字を挿入します。
使うのは:beforeや:afterの疑似要素にcontent:’好きな文字’とするだけ。

h1:before{
  content:'前です';
}
h1:after{
  content:'後です';
}

デモではわかりやすく文字に色を付けてみます。

See the Pen GPjqyP by Yoshimune (@hachidaime) on CodePen.

簡単でしょ。
応用するとこんな感じです。

See the Pen GPjqxz by Yoshimune (@hachidaime) on CodePen.

疑似要素は、通常の要素と同じようにサイズを変えたり、背景色をつけたりCSSでできる事は何でもできてしまいます。
なので、疑似要素にスタイルを指定することで、今までは面倒だったオシャレなデザインが簡単にできます。

使えるのはデザインだけじゃありません。
例えば、floatの回り込みを解除するためのclearfixと呼ばれるものなども、疑似要素で簡単に利用できます。

.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}

疑似要素って、新しく要素を追加しなくても使える、そしてCSS使いまわしが容易。
なので、うまく使っている人とそうでない人ではかなりコーディングの時間に差が出ると思います。
知らなかった人は、ぜひ使いこなせるようになっておきましょうね。