1行目だけ1文字ずらそうとしてうまくいかなかった時の対応方法

擬似要素で行頭に「・」を追加して、1行目だけ1文字分ずらそうとした際にうまくいかないことがあったので、その際の対応方法をメモ。

サンプルコード

まずはうまくいかなかった場合です。
行頭にテキストで「・」を入れた場合と、擬似要素のcontentプロパティで「・」を追加した場合を試してみます。

<p>文頭の「・」をテキストで入れた場合</p>
<ul>
	<li class="indent">・テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</li>
	<li class="indent">・テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</li>
</ul>
<p>文頭の「・」を擬似要素で入れた場合</p>
<ul>
	<li class="list-mark indent">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</li>
	<li class="list-mark indent">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</li>
</ul>

「・」の分だけ1行目の1文字目をずらすので、margin-leftとtext-indentを設定します。

.indent {
	margin-left: 1em;
	text-indent: -1em;
}
.list-mark::before {
	content: '・';
	display: inline-block;
}

この場合、擬似要素で「・」を追加した方は2文字分ずれてしまいます。
うまくいかなかった場合のデモページ

色々試してみた結果、擬似要素のdisplayをinlineにするか、指定自体をなくすことで意図した表示にできました。

.indent {
	margin-left: 1em;
	text-indent: -1em;
}
.list-mark::before {
	content: '・';
	display: inline;
}

対応後のデモページ