e.innerText.spit('')[0]
だとサロゲートペア非対応で絵文字が壊れる。Array.from(e.innerText)[0]
でいける。::first-letter
を使う。display: none
が使えないのはつらい。<ul class="c20220808"> <li>💫定期開催 <ul> <li>➜<a href="">🌞日替わりセール</a> <a href="">🌛月替わりセール</a> </li> </ul> <li>💰<a href="">ポイント還元対象作品</a> <ul> <li>🅿<a href="">31%以上</a> <ul><li>➜<a href="">💭マンガ</a> <a href="">🧙ラノベ</a> <a href="">📔文学</a> <a href="">🧪科学</a> <a href="">📊ビジネス</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" のとき (コレジャナイ!)
- 📕おはようございます。
- 📕こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
- マーカー文字が📕のとき (コレダ!)
- おはようございます。
- こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。