HTML: リストのマークを任意の文字（印）にする方法
ulタグやolタグのリストマークは変更することができます。
ここでは、リストのマークを任意の文字（マーク）にする方法を紹介します。
サンプル（リストのマークを「★」にする）
下のサンプルリストは、マークを「★」に変更してます。
- リスト項目1
- リスト項目2
- リスト項目3
- リスト項目4
- リスト項目5
HTML
サンプルリストのHTMLコードは次の通りです。
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
<li>リスト項目5</li>
</ul>
CSS
リストのマークを変更するCSSは次のようになります。
/* デフォルトマークをなしにする */
ul {
list-style-type: none;
}
/* 任意のマーク */
li::before {
content: "★ " ;
}
解説
まず、「list-style-type」プロパティに「none」を指定することで デフォルトのマークをなしにします。
次に疑似要素「li::before」を使って、
要素テキストの直前に追加される内容を指定します
指定内容は「content」プロパティで指定します。
★の後にスペースを入れることで、間隔をとって見やすくしています。