リスト要素で※などを簡単かつ要素的にもきれいに表示する
<ul> <li>こんな感じの注意書きをきれいに表示してください。</li> <li>お申し込み後のキャンセルはできません。また、商品が不良品の場合を除き、返品はできません。</li> <li>配送は国内に限ります。</li> </ul>
こういったリストの表記で※を使ってというケースは非常に多くあると思います。
中にはいるテキスト文量が折り返さない程度であればpでやってあるのも、よく見かけます。
※を背景画像で、っていうのがクラシカルな対応だとは思いますが、今となってはめんどくさいですよね。
かといって、
.li {
padding-left: 1em;
text-indent: -1em;
}
なんてやるのも、ちょっと美しくないかなと個人的には思っています。
そこで最近は以下のようなcssで対応することが多くなりました。
ul { margin-left:15px; /* beforeで左に動かした分を相殺 */ }
ul li { display:block; position:relative; }
ul li:before { content:'※'; position:absolute; left:-15px; /* インデントさせるため「※」だけを左に */ }
これだとhtml的にもきれいだし、コーディング時もわざわざ※を打たなくていいし、楽だなーって思ってます。
誰かこういうのやってないかなと思って検索して探したこともあるんですが、実際やってみると、出てくるのはインデント系のものばかりで、なんて検索していいのかわかりませんでした。
ので、考えてやってみました。