こなさんみんばんわ。
dl リストの dt 要素の頭にマーカーっぽい印を付けるために、今までは ::before 擬似要素にボーダーを付与したもので無理やり作ってたんですが、もう現在では任意の文字列をマーカーに使う手法がどの主要ブラウザでも使えるようになっているので、その手法を使ってリニューアルしてみました。これだと元に戻したい（マーカーを消す）場合にも display: initial とかすればいいだけなので、楽でいいような気がします。
ですが、この手法にはちょっと困ったところがありまして、ただ文字列を指定するだけだと dt 要素の内容とリストマーカーに使ってる文字との間に隙間が一切できないのですね。
See the Pen List marker using <string> by Jeffrey Francesco (@jforg) on CodePen.
で、隙間を空けようと思うと普通であれば margin で離すとか left: -10px とかして動かすなどの方法を思い浮かべる訳ですが、::marker 擬似要素にはそういうのが一切効きません。これは ::marker 擬似要素の対応する CSS プロパティが一部のものに限られているためです。
::marker擬似要素は、限られた数の CSS プロパティのみに対応しています。例えば以下のようなものがあります。
- すべてのフォントプロパティ
white-spaceプロパティcolortext-combine-upright,unicode-bidi,directionの各プロパティcontentプロパティ- すべてのアニメーションおよびトランジションプロパティ
これだけしかありません。困りましたね、どうして隙間を調整しましょうか…と思ってたら、ものすごくシンプルな解決策がありました。というより、これ以外の方法を思いつかないのですが…😭
See the Pen List marker using <string> with spaces by Jeffrey Francesco (@jforg) on CodePen.
単にマーカーとして使ってる文字の後ろに任意の数のスペースを追加するだけです。最初は ::marker 擬似要素に white-space: pre を当ててみてたんですが、当てなくてもこの部分は元からそれに近い状態になってるようで、このスタイルを削除してもスペースがまとめられるようなことはなく、追加したら追加しただけ間隔が空いていくのでした。
注意点としましてはかなり昔の記事で書いたように、仕様上エスケープ文字列の直後に出現する空白文字のひとつは無視されることになっているので、空白をはさみたい場合には最低でもふたつのスペースを入れる必要がある、というあたりでしょうか。
まぁ「本当にええのんかこんなんで?🤔」という気もしますが、これしか方法はなさそうなので仕方がないですね。先に挙げた MDN のリンク先によると ::marker 擬似要素に対応するプロパティについては将来的に変更があるかもしれない、的なことは仕様書にも書いてあるようなので、それまではこれで対応しておくことにしましょう。
あるいは、list-style-position: outside 10px; みたいな書き方ができるようにならんもんでしょうかね。
あっ変更したスタイルはライブ告知エントリーの概要セクションあたりで確認ができますよ。
現場からは以上です。