【CSS】見出しの記号をCSSで表示

CSSの小技第4回目は「見出しの記号をCSSで表示」です。
見出しに「●」や「▲」「◆」などを利用する場面も多いと思います。
例えばこのような記述↓

<h2>● 今月のオススメ商品</h2>

最近のHTML5やCSS3の方向性として「色、形、大きさなどの装飾はCSSで行う」と言う前提がありますので、HTMLソースはなるべくテキストのみで記述したいところです。
また、見出しはSEO対策として重要な面もありますので、余計なテキストを入れ込むことは極力避けたいと言うのが実情です。

記号を表示させる方法

Webページ上で記号を表示させる場所として、見出しの「前」か「後」もしくは「両方」かと言う部分があります。
ここで使用するのが:beforeと:afterの擬似セレクタです。
それから表示させる記号を指定するcontentのプロパティです。

HTML

<h2>←前のみの見出し</h2>
<h3>←前後の見出し→</h3>

CSS

h2:before {
	content:'◎';
}

h3:before,
h3:after {
	content:'▲';
}

アレンジ1

見出しに限らずリストタグなどでも活用できます。また、色の変更をすることも出来ます。

HTML

<ul>
	<li>HOME</li>
	<li>ABOUT</li>
	<li>SERVICE</li>
	<li>NEWS</li>
	<li>CONTACT</li>
</ul>

CSS

li:before {
	content:'● ';
	color: red;
}

アレンジ2

リストタグで言うところのlist-style-typeやlist-style-imageと似たような働きをしますが、
リストタグとは違い、「リスト以外で使うことが出来る」「文末に記号を表示することができる」と言った利点があります。
また、リストタグと同様「画像を使用することも可能」です。

HTML

<ul>
	<li>HOME </li>
	<li>ABOUT </li>
	<li>SERVICE </li>
	<li>NEWS </li>
	<li>CONTACT </li>
</ul>

CSS

li:after {
	content: url('../images/tri.png');
}
li {
	text-align: right;
	width: 7em;
}

まとめ

以上、4回に渡って「CSSの小技」をお送りしましたが、
日常ホームページ作成を行っていて「ここどうしたら上手に出来るだろう」「もっとシンプルな方法無いかな」と言った、
私や同業者の方の「小さな悩み」を少しでも解決出来るような備忘録として活用できればと思います。
ホームページ作成の「小さな悩み」を解決する小技はまだまだ無数にあります。
また次の機会に少しずつ紹介できればと思います。