ul li タグのリストマーカーに好きな文字列を設定する方法

ul や ol を利用したリストタグに任意の文字列をマーカーとして使用する方法を紹介します。
具体的には liタグのbefore疑似要素で好きな文字をマーカーとして設定し、リスト全体をずらして、リストタグっぽさを損なわないようにします。

コードはこんな感じ。

<ul class="custommarker01">
	<li>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト</li>
	<li>2番目のリスト</li>
	<li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li>
	<li>4番目のリスト4番目のリスト4番目のリスト<br>4番目のリスト4番目のリスト4番目のリスト</li>
</ul>

<ul class="custommarker02">
	<li>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト</li>
	<li>2番目のリスト</li>
	<li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li>
	<li>4番目のリスト4番目のリスト4番目のリスト<br>4番目のリスト4番目のリスト4番目のリスト</li>
</ul>

<li>1番目のリスト1番目のリスト 1番目のリスト1番目のリスト</li>

<li>2番目のリスト</li>

<li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li>

<li>4番目のリスト4番目のリスト4番目のリスト 4番目のリスト4番目のリスト4番目のリスト</li>

</ul>

<li>1番目のリスト1番目のリスト 1番目のリスト1番目のリスト 1番目のリスト1番目のリスト</li>

<li>2番目のリスト</li>

<li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li>

<li>4番目のリスト4番目のリスト4番目のリスト 4番目のリスト4番目のリスト4番目のリスト</li>

</ul>

こんな風に普通にリストをHTMLで記述します。

お次はCSSで以下のように書きます。

body {
	font: 14px sans-serif;
	line-height:1.5;
	padding:10px;
}
ul {
	margin-bottom:2em;
}
ul.custommarker01 {
	list-style-type: none;
	margin-left:14px;/* マーカーを1文字寄せた分、ULにマージンを設定*/
}
ul.custommarker01 li:before {
	content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-14px; /* 1文字分、左に寄せる */
}

ul.custommarker02 {
	list-style-type: none;
	margin-left:42px; /* マーカーを3文字寄せた分、ULにマージンを設定*/
}
ul.custommarker02 li:before {
	content: '●▲■'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-42px; /* 3文字分、左に寄せる */
}

body {

font: 14px sans-serif;

line-height:1.5;

padding:10px;

}

ul {

margin-bottom:2em;

}

ul.custommarker01 {

list-style-type: none;

margin-left:14px;/* マーカーを1文字寄せた分、ULにマージンを設定*/

}

ul.custommarker01 li:before {

content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */

margin-left:-14px; /* 1文字分、左に寄せる */

}

ul.custommarker02 {

list-style-type: none;

margin-left:42px; /* マーカーを3文字寄せた分、ULにマージンを設定*/

}

ul.custommarker02 li:before {

content: '●▲■'; /* ←ここにリストマーカーにしたい文字列を設定 */

margin-left:-42px; /* 3文字分、左に寄せる */

}

今回の例では「※」という文字と「●▲■」という3文字の記号をそれぞれリストマーカーとしたサンプルを公開します。ポイントはli:beforeの contentプロパティにリストマーカーとして使用した文字を記述する点です。こうすることによって、ul li を書いたHTMLタグにリストマーカーとして使いたい文字列をいちいち記入しなくても、自動的にマーカーが表示されるようになります。

ここから先はお好みですが、設定した文字列の文字数×フォントサイズ分だけmargin-leftにマイナスのマージンを設定します。そうするとリストマーカーだけが、左に移動します。そして親要素のulタグに対して、左に寄せた分だけmargin-leftでプラスのマージンを設定します。そうすると一つのli要素のリストが複数行になった場合、2行目以降がマーカーにぶら下がったように表示させることができます。

See the Pen
ul liリストに好きな文字列をマーカーとして使用する方法 by jugedred (@jugedred)
on CodePen.

以上です。
ここで使われたCSSを応用すれば、ネストされたリストに対し、階層ごとに別の文字列をマーカーとして使用するというCSSの書き方もできますね。お気に召したら、いろいろ実験してみてくださいね。