「直前」に何かを加える before 疑似要素
「疑似要素」という言葉は聞き慣れないかも知れませんね。
この before 疑似要素を使うと（※）、任意の要素の頭（直前）に、任意のオブジェクトを加えることができます。例えば以下のソースを見て下さい。
※正確には、「contentプロパティと一緒に使って」実現されます。
h1:before {
content: ～
}
こう書けば、「 h1 要素の直前(before) 」に、任意の文字や画像などを加えることができます。
h1:before {
content: url(orangeball.gif);
}
このように記述することで、h1要素の直前に「orangeball.gif」という画像を表示させることが可能です。
追加できるのは画像だけではありません。
h1:before {
content: "★注意：";
color: red;
}
こう記述すれば、h1要素の直前に赤色の文字「★注意：」を追加することが可能です。
もちろん、適用先は見出しに限りません。
p:before {
content: ～
}
こうすれば、各段落（p要素）の先頭に何かを加える（例えば画像を置く）ことも可能です。
どうですか？
デザインの幅が大幅に膨らみそうではありませんか？
実際に作ってみましょう！
それでは、実際に before 疑似要素と contentプロパティで 見出しの先頭にマーカーを付けてみましょう。
