[CSS] ※(米印)ある次の行をインデントさせる方法

概要

注釈や規約の文章で「※（米印）」付きの箇条書きを表現することは多い。※印以降の段落は頭が 1 つ下がっているため、それを CSS で表現するためにはいくつか手法がある。

コード

text-indentを1em分マイナスして、margin-leftを1emズラすという手法がよく使われていた。

<div style="margin-left:1em;text-indent:-1em;">
  ※注釈（ちゅうしゃく、旧表記：註釈）とは、既述の文章や専門用語についての補足・説明・解説のこと。補注とも、単に注（旧表記：註）ともいう。
</div>

ただ、この方法だと※印と最初の文字の余白間隔を調整出来なかったり、出来たとしても次の行の頭が揃わなくなってしまう問題も出てきてしまう。

ulとliを利用してマーカーを※印に変更することで余白のズレなどの問題は払拭できる。

li::marker {
  content: "※";
}

サンプル