list-style-type: 🥺 #CSS

list-style-typeとは

リスト項目要素のマーカーのことですね。

hiragana-irohaやcjk-earthly-branchなど、使い所があまりないけれど、知識としては面白いプロパティもあるので、ドキュメントを読んでみることをオススメします。

さて、本題ですが、list-style-typeは規定値としてdiscが設定されています。
そのため、デフォルトのスタイルでは●がでることでしょう。

これを🥺に変えるには、値にUnicodeを設定します。

🥺はU+1F97Aのため、次のようにします。

HTML

<ul>
  <li>ぴえん</li>
  <li>ぴえん</li>
</ul>

CSS

ul {
  list-style-type: "\1F97A";
}

これで🥺をlist-style-typeで使うことができます。

ちなみに💩はU+1F4A9ですので、💩を出したいは次のようにします。

CSS

ul {
  list-style-type: "\1F4A9";
}

また、HTML上で🥺や💩を文字として使いたい場合は、数値文字参照を使うことでデバイス間による文字化けを防ぐことができます。

HTML

<!--ぴえん-->
<p>&#x1f97a;</p>
<!--うんち-->
<p>&#x1f4a9;</p>

絵文字のUnicodeと数値文字参照がまとめられていて、分かりやすかったです。
https://lets-emoji.com/