CSSのlist-style-typeに任意の文字列を設定する

2022-03-19 / CSS

ul のスタイルにある list-style-type は任意の文字列が設定できるようになっています。知りませんでした。

検索して出てくる解

ul li dash で検索すると以下のような StackOverflow などの記事が引っかかります。

css - HTML list-style-type dash - Stack Overflow

これを参考に実装すると以下のようになります。

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

要点としては

list-style-type: none でリストの記号をなくす
li:before に対して content: "-" で記号を付与する

という 2 段階になっています。まぁこれでも実現は問題ないのですが…。

MDN みたら正解が載っていた

気になって MDN を見てみたところ、余計なことをせずに実現できるシンプルな方法が載っていました。

list-style-type - CSS: カスケーディングスタイルシート | MDN

サンプルではサムズアップを指定する方法が記載されています。

list-style-type: "\1F44D"; // thumbs up sign

list-style-type: <string> という記述が利用できるようですね。

特定の文字列を、リストのマーカーとして使用します。

文字列なので - のようにスペースで余白を作ることもできます。

list-style-type: "- ";

実際には別のプロパティ（margin など）で調整した方が良さそうです。