ページ内の文章において注釈を米印（以降※）で表現したい時がありますが、<p>に※から始める方法で実装すると、改行された時の見た目が悪くてちょっと残念な気持ちになります…
HTMLのマークアップという観点からも、注釈が複数ある場合は、<ul>や<ol>のリストで実装したいところです。
ということで、リストに※を付ける方法。
<p>で実装した時の表示
文章の最初に※を入れるとこのような表示になります。
※ 本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）
※ キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）
これでもいいけど改行が入ると「※」が埋もれて目立たない。
インデント（text-indent）で調整するのも一つの手ですが、リストタグで実装しスタイルを整えていきます。
<ul>にCSSで※を付ける
- 本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）
- キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）
見やすくなりました！
デフォルトのマーカーは非表示にして、<li>に擬似要素（::before）で※を追加しています。
<ul class="annotation">
<li>本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）</li>
<li>キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）</li>
</ul>
ul.annotation {
list-style: none;
padding: 0;
}
ul.annotation li {
display: flex;
}
ul.annotation li::before {
content: "※";
margin-right: .25em;
}<ol>にCSSで※と連番を付ける
ついでに番号付きの注釈も実装。
- 本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）
- キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）
HTMLは<ul>タグを<ol>タグに変えただけです。
<ol class="annotation">
<li>本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）</li>
<li>キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）</li>
</ol>ol.annotation {
list-style: none;
padding: 0;
}
ol.annotation li {
display: flex;
counter-increment: my-counter;
}
ol.annotation li::before {
content: "※"counter(my-counter);
margin-right: .5em;
}HTMLだけで簡単に実装してみる
CSSのクラスセレクタが使えない場合は、直接マーカーを変更してしまうのもありですね。
- 本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）
- キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）
<ul>
<li style="list-style-type: '※ ';">本サイトに掲載されている商品画像は、撮影環境やご利用のモニター設定等により、実際の商品と色味や質感が異なる場合がございます。あらかじめご了承ください。（例文）</li>
<li style="list-style-type: '※ ';">キャンペーン内容や実施期間は予告なく変更・終了となる場合がございます。最新情報につきましては、当サイトまたは店舗スタッフまでお問い合わせください。（例文）</li>
</ul>