疑似要素について

いちいちタグを追加しなくても、ちょっとした要素ならCSSの世界で擬似的に追加しちゃおうぜ！ってやつ。

<ul>
  <li>hoge</li>
</ul>

リストの先頭や後ろにマーカーを追加する際、こんな事をやっていたかもしれない。

<ul>
  <li><img src="xxx.png" />hoge</li>
</ul>

はたまたliに対してバックグラウンドイメージを持たせて、左余白開けて・・・とか。

それ、疑似要素でやればタグを汚さずに済むよね？

li::before {
  content: url(xxx.png);
}

ちなみに、シングルコロンはCSS２で、ダブルコロンはCSS3と厳格化されているので後者を使いましょう。