リストマーカーを指定したテキストで表示する方法を紹介します。リストマーカーは疑似要素とデータ属性で表示します。
HTML
補足
- ul 要素に list-marker クラスを付けます。
- li 要素にデータ属性（ data-marker ）を付け、リストマークとして表示するテキストを指定します。
CSS
補足
- まず、list-style-type: none で本来のリストマークを削除します。
- リストマークは各 li 要素の疑似要素 before で表示します。
- データ属性（ data-marker ）で指定されたテキストを疑似要素 before の content として表示します。
- 尚、リスト項目が１行に収まらない場合、２行目以降はリストマーカーの下へ改行されます。リストマーカーを避けるには別途対策が必要です。