文章の1行目の頭文字を1文字分左にずらす

リストの文章の頭に「・」や「(1)」などを付けたいとき、1行目の文章開始位置と2行目以降の頭文字をそろえてみます。

サンプルコード

HTML

<ul class="sample01">
	<li>・私も場合どうしてもその講演方とかいう方のところを考えであっ。</li>
	<li>・もっと今を話らもすこぶるその関係ですたまでをしがくれるだろをはお話なっでましば、それほどにも向くですたたう。個人を愛するませのもすでに今日をかくですたた。とにかく槙さんをお話し方面まだ発展の喰わです国家ある知人私か利用がってご焦燥たでないたが、その以前はそれか家族相手を思い切って、嘉納さんの事を教場のここを勢いお講演とすると私人をお相違が瞑っようにちゃんとお懊悩にやっつけだなて、もうけっして講義をしたくて致したのが云っですです。</li>
	<li>・またすなわちご国民にすのはそう不可能とやりたで、その自分がはしましてという空虚を聴いてくれないん。</li>
</ul>
<ul class="sample02">
	<li>●私も場合どうしてもその講演方とかいう方のところを考えであっ。</li>
	<li>●もっと今を話らもすこぶるその関係ですたまでをしがくれるだろをはお話なっでましば、それほどにも向くですたたう。個人を愛するませのもすでに今日をかくですたた。とにかく槙さんをお話し方面まだ発展の喰わです国家ある知人私か利用がってご焦燥たでないたが、その以前はそれか家族相手を思い切って、嘉納さんの事を教場のここを勢いお講演とすると私人をお相違が瞑っようにちゃんとお懊悩にやっつけだなて、もうけっして講義をしたくて致したのが云っですです。</li>
	<li>●またすなわちご国民にすのはそう不可能とやりたで、その自分がはしましてという空虚を聴いてくれないん。</li>
</ul>
<ul class="sample03">
	<li>(1) 私も場合どうしてもその講演方とかいう方のところを考えであっ。</li>
	<li>(2) もっと今を話らもすこぶるその関係ですたまでをしがくれるだろをはお話なっでましば、それほどにも向くですたたう。個人を愛するませのもすでに今日をかくですたた。とにかく槙さんをお話し方面まだ発展の喰わです国家ある知人私か利用がってご焦燥たでないたが、その以前はそれか家族相手を思い切って、嘉納さんの事を教場のここを勢いお講演とすると私人をお相違が瞑っようにちゃんとお懊悩にやっつけだなて、もうけっして講義をしたくて致したのが云っですです。</li>
	<li>(3) またすなわちご国民にすのはそう不可能とやりたで、その自分がはしましてという空虚を聴いてくれないん。</li>
</ul>

CSS

.sample01 li {
	margin-left: 0.5em;
	text-indent: -0.5em;
}
.sample02 li {
	margin-left: 1em;
	text-indent: -1em;
}
.sample03 li {
	margin-left: 1.5em;
	text-indent: -1.5em;
}

text-indentで頭文字を左へずらして、margin-leftで頭文字をずらした分だけ全体的に右にずらしています。
頭文字に合わせて値の調整が必要です。
文章の1行目の頭文字を1文字分左にずらすデモページ