リストタグと文字の間の余白を調整したい

実現したいこと

リストの・と（文字）の間の余白をうまく合わせたいです
画像を添付いたします
黒の点を白の点の位置に持っていきたいです

前提

リストマーカーを内側に配置
list-style-position: inside;を指定しているため

<li>にpadding-left:を入れてもうまくいきませんでした

list-style-position: inside;にしているのは
リストの文章が２行を超えた場合、黒点（リストマーカー）の下
に文字が来るようにしたいためです。

初歩的な質問ですが
アドバイスよろしくお願いいたします！

Lhankor_Mhy

2023/06/09 01:39

コードをご提示ください。

Lhankor_Mhy

2023/06/09 01:48

もしかして、この白い文字は PerfectPixel を使ってカンプを重ねてるとか、そういう話ですか？

chogemi

2023/06/09 02:23

言葉足らずで申し訳ありません！そうです。PerfectPixelで重ねたズレを修正したいのです。コード少々お待ちください。

chogemi

2023/06/09 02:34

コードになります https://jsfiddle.net/h5y7bq14/ カンプは現状よりリストマーク（・）と文字の余白が近いです意図伝わりますでしょうか…

Lhankor_Mhy

2023/06/09 02:48

マーカーをすごく小さくしてるみたいですが、これをベースに考えればいいですか？

chogemi

2023/06/09 02:55

試行錯誤して小さくしてしまっていました。サイズは気になさらないで大丈夫です。サンプルページもお送りしますがおそらくマーカーサイズは私のコードが間違っています https://demo.techacademy.jp/website-self-study/second/?_ga=2.142571954.1458391361.1685331616-469731249.1684618225#

行動規範の内容に同意します

回答1件

ベストアンサー

ひとつめは、ご提示のコードにもありました::marker疑似要素を使う方法です。フォントファミリーその他を組み合わせて試行錯誤する必要があると思います。

css
1        ul {
2            list-style-position: inside;
3        }
4
5        ::marker {
6            font-family: 'Times New Roman', Times, serif;
7            font-size: 0.7em;
8            font-weight: 900;
9        }

ふたつめは、::before疑似要素を使って、リストマーカーもどきを作ることです。この場合は、letter-spacingで字間が調整できると思います。

css
1        ul {
2            list-style: none;
3        }
4
5        li::before {
6            content: "・";
7            letter-spacing: -0.3em;
8        }