「before,after」擬似要素を使用してカウンター（自動連番）を挿入する

「before/after」擬似要素を利用して、ランキングなどのリストの先頭にカウンター（自動連番）を挿入してみます。

1.HTMLを記述

<ul class="ranking rankBox">
	<li class="ranking-list" data-point="100">Yamammoto</li>
	<li class="ranking-list" data-point="98">Ishikawa</li>
	<li class="ranking-list" data-point="94">Sekiguchi</li>
	<li class="ranking-list" data-point="90">Nakamura</li>
	<li class="ranking-list" data-point="89">Iwase</li>
	<li class="ranking-list" data-point="88">Ootake</li>
	<li class="ranking-list" data-point="85">Egawa</li>
	<li class="ranking-list" data-point="82">Watanabe</li>
	<li class="ranking-list" data-point="80">Kobayashi</li>
	<li class="ranking-list" data-point="75">Zama</li>
</ul>

<li class="ranking-list" data-point="100">Yamammoto</li>

<li class="ranking-list" data-point="98">Ishikawa</li>

<li class="ranking-list" data-point="94">Sekiguchi</li>

<li class="ranking-list" data-point="90">Nakamura</li>

<li class="ranking-list" data-point="89">Iwase</li>

<li class="ranking-list" data-point="88">Ootake</li>

<li class="ranking-list" data-point="85">Egawa</li>

<li class="ranking-list" data-point="82">Watanabe</li>

<li class="ranking-list" data-point="80">Kobayashi</li>

</ul>

2.CSSを記述

.ranking .ranking-list{
	background: #896e1a;
	color: #FFF;
	counter-increment: number;	/* counter-incrementプロパティに「number」というカウンタ名を付けています。 */
	font-family: sans-serif;
	margin: .5em;
	padding: .5em;
	border-left:5px solid #dec783;
}
.ranking .ranking-list::before{
	content: counter(number)".";	/* カウンター名「number」という値と文字列「.」を出力し、自動的に1づつ値を進めます */
	color: #dec783;
	font-style: italic;
	font-weight: bold;
	margin: 0 1em 0 0;
	max-width: 2em;
	min-width: 1em;
	text-align: right;
}
.ranking .ranking-list::after{
	content: "("attr(data-point)"ポイント)";	/* attr()式を利用して後ろに、「data-point」の値と「ポイント」という文字列を出力しています。 */
	color: #efefef;
	font-sie: .7em;
	margin: 0 0 0 .5em;
}

.ranking .ranking-list{

background: #896e1a;

color: #FFF;

counter-increment: number; /* counter-incrementプロパティに「number」というカウンタ名を付けています。 */

font-family: sans-serif;

margin: .5em;

padding: .5em;

border-left:5px solid #dec783;

}

.ranking .ranking-list::before{

content: counter(number)"."; /* カウンター名「number」という値と文字列「.」を出力し、自動的に1づつ値を進めます */

color: #dec783;

font-style: italic;

font-weight: bold;

margin: 0 1em 0 0;

max-width: 2em;

min-width: 1em;

text-align: right;

}

.ranking .ranking-list::after{

content: "("attr(data-point)"ポイント)"; /* attr()式を利用して後ろに、「data-point」の値と「ポイント」という文字列を出力しています。 */

color: #efefef;

font-sie: .7em;

margin: 0 0 0 .5em;

}

これを表示してみると下記のようになります。

今回は、「counter-increment」プロパティというものを使用しています。
こちらの解説につきましては、後日まとめていきたいと思います。