【CSS】ulタグ、liタグを使わないリスト表示

リスト表示は冒頭部分にインデントが設定され、改行が生じた際に見やすくなる便利な書式である。
ところが、一般的に知られているulタグやliタグは許容される使用パターンが狭いブロック要素であり、margin等が初期設定されていていちいち体裁を整える必要があるなど、意外に柔軟性に欠け何かと使いづらい場面が多かったりする。

そこで、ul、liタグを使わず、インライン要素のみで簡易的に文字列をリストっぽく表示させるコードを作る。

【CSS】

.quasili_star {
	display: inline-block;
	position: relative;
	margin-left: 1.1em;
}
.quasili_star span.mark::before {
	position: absolute;
	left: -1.1em;
	content: '★';
}

content: '★'; のクォーテーションの中身を変えることで、マーカーを自由に変更できる。

【HTML】

<span class="quasili_star">
<span class="mark"></span>
項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１
</span>
<span class="quasili_star">
<span class="mark"></span>
項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２
</span>
<span class="quasili_star">
<span class="mark"></span>
項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３
</span>

【表示例】

項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１項目１
項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２項目２
項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３項目３

特に難しいことはしていないが、『Hino-Tama-Basic』テーマに実装したので一応メモしておく。