コピペOK！疑似要素でテキストの前後に画像を表示する方法／CSS

テキストの前後やリストに添えるアイコンに「画像」を表示させるのをよくみますね、
これは単純に画像を貼っているだけだと思っていたのですが
CSSの「疑似要素」で表示させるのがおすすめのようなのでメモします。
ちなみに擬似要素のことはよくわかりません。とにかく擬似要素です。

疑似要素のcontentで画像を指定する方法

擬似要素とは、ざっくりいうと「仮の要素」のことらしいです。
HTMLに記述せず、CSSで擬似的に作成される要素であるため「擬似要素」と呼ばれるのだとか。
それではさっそく擬似要素のcontentを使用してCSSを実装してみましょう↓

HTMLはコチラ

<div>
　<p class="giji-text">テキストテキスト</p>
</div>

CSSはコチラ

/*擬似要素テキスト前後マーク*/
.giji-text::before {
	content: url("image/○○○○○○.png");
  　vertical-align: middle;　/*上下の位置を中央に*/
  　padding-right: 50px;　/*テキストの右側空きスペース*/
}
.giji-text::after {
	content: url("image/○○○○○○.png");
  　vertical-align: middle;　/*上下の位置を中央に*/
  　padding-left: 50px;　/*テキストの左側空きスペース*/
}

これで任意のテキストの前後に画像を表示させることができました。
この方法なら、いちいちHTMLでimgタグを入力しなくても、class設定するだけで
複数の要素に同じ画像を挿入することができて便利ですね。

注：いくつか調べて参考にしたサイトでCSSのbeforとafterの
前にある二つのコロン「::」が一つだけ記述しているものがありました。
不思議に思って調べてみるとCSS3から擬似要素はコロン二つに変更となったそうで
ブラウザによってはまだコロン一つでもエラーにならないみたいです。
ですがこれからはコロン二つにする方が良いみたいですね。
僕のように迷った方は参考にしてみてください。