古い記事
ランダムジャンプ
新しい記事

【CSS】リストの先頭のマーカー文字を絵文字にしたい、それも li ごとに違う絵文字に

2022-08-08-1 [Programming][JavaScript]
li ごとにそれぞれ別の絵文字をマーカー文字として設定したい。
しかし、list-item-style で一つ一つ li に設定するのは面倒。
なので、li の先頭文字をリストのマーカー文字にする作戦！

  • li の先頭文字の取得。
    e.innerText.spit('')[0] だとサロゲートペア非対応で絵文字が壊れる。
    Array.from(e.innerText)[0] でいける。
    これをマーカー文字として JavaScript で設定すれば良い。
  • マーカー文字で使う先頭文字を li 本体で非表示にする。
    そうしないと二重で表示されるので。
    擬似要素 ::first-letter を使う。
    しかし利用可能プロパティの制約がきつい。
    display: none が使えないのはつらい。
    とりあえず透明にして全体を左にずらすことに。

こんな感じになりました。
(サービス適用例: キンセリの「定番セール」コーナー)
li marker emoji CSS

サンプルコード (HTML, CSS, JavaScript):
<ul class="c20220808">
 <li>&#x1F4AB;定期開催
 <ul>
  <li>&#10140;<a href="">&#x1f31e;日替わりセール</a>
   <a href="">&#x1f31b;月替わりセール</a>
  </li>
 </ul>
<li>&#x1f4b0;<a href="">ポイント還元対象作品</a>
 <ul>
 <li>&#x1f17f;<a href="">31%以上</a>
  <ul><li>&#10140;<a href="">&#x1F4AD;マンガ</a>
   <a href="">&#x1f9d9;ラノベ</a>
   <a href="">&#x1f4d4;文学</a>
   <a href="">&#x1f9ea;科学</a>
   <a href="">&#x1f4ca;ビジネス</a>
  </li>
 </ul>
 </li>
</ul>
<style>
.c20220808 li::first-letter { color: transparent; margin-left: -1em; }
</style>
<script>
Array.from(document.querySelectorAll('.c20220808 li')).forEach(
  function(e){ e.style.listStyleType = '"' + Array.from(e.innerText)[0] + '"'; }
);
</script>

なお、最初は list-style-type: none で良いかと思ったのですが、折り返しが発生したときに「コレジャナイ！」となりました。
  • "list-style-type: none" のとき (コレジャナイ！)
    • 📕おはようございます。
    • 📕こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
  • マーカー文字が📕のとき (コレダ！)
    • おはようございます。
    • こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。

参考

この記事に言及しているこのブログ内の記事

書いてる人：たつを