list-styleにも下線を引きたい

Question

前提

liをインデントし、borderで下線を引いたとき、
list-styleには下線が引けない。

実現したいこと

liをインデントし、borderで下線を引いたとき、
list-styleにも下線が引きたいです。

※インデントさせなければ全体にborderが引かれるのですが、
インデントさせると、テキストが右にずれる＝その箇所だけ下線が引かれてしまいます。

1.テキストが長くなったときのためにインデント
2.list-styleを付けたい（今回は数字でしたが他の場合もあり）
3.全体にborderを引きたい
この3点を同時に実現させたいです。

該当のソースコード

【HTML】

<ol>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ol>

【CSS】

ol {
text-indent: -1.8rem;
margin-left: 1.4rem;
}

li {
border-bottom: 1px solid #999;
list-style-type: decimal;
list-style-position: inside;
}

試したこと

疑似要素で試したり、margin/paddinngを色々試してみましたがうまくいかずでして、、、ご教示お願いいたします。

Answer 1

疑似要素で下線をつけてはどうでしょう。
text-indentで移動した分、ネガティブマージンで左に移動させれば左側が揃います。

ol {
  text-indent: -1.8rem;
  margin-left: 1.4rem;
}
li {
  list-style-type: decimal;
  list-style-position: inside;
}
li::after {
  content: "";
  display: block;
  border-bottom: 1px solid #999;
  margin-left: -1.8rem;
}

追記

リストのテキスト部分を折り返したとき、左端を揃えたいということなら、
上記のような面倒なことをせずとも、
下記でいいでしょう。

ol {
  list-style-type: decimal;      /* この設定は初期値なのでなくてもOK */
  list-style-position: outside;  /* この設定は初期値なのでなくてもOK */
}

li::after {
  content:"";
  display: block;
  border-bottom: 1px solid #999;
  margin-left: -1.5rem;
}

Comments

[yoshigo]

ご回答ありがとうございました！

ol {
list-style-type: decimal;
list-style-position: outside;
}

li::after {
content:"";
display: block;
border-bottom: 1px solid #999;
margin-left: -1.5rem;
}

ご教示いただいたアイデアを試してみまして解決いたしました。
※list-style-type分が左にずれる（はみだす）ため、
olにpadding-left:1.5rem;もつけまして、
全て実現できました。

疑似要素もいろいろチェックし勉強にもなり、
上記カスタマイズして引き出し増やせそうです。

また機会ございましたら是非よろしくお願いいたします！
大変助かりました、ありがとうございました。

Answer 2

リストマーカーに下線がついてないというか、そもそもテキストの先頭にも下線が付いてないですよね。負の text-indent だとテキストがボーダーから外れてしまうのは仕方がない気がします。

<ol> に負の text-indent を設定するのではなく、<ol> の padding-inline-start を 40px より小さい値にしましょう。

Comments

[yoshigo]

ご回答ありがとうございます！

仰るようにそもそもテキストに下線ついておらずでした。
試してみたのですがインデントが付かなかったのと、例えば30pxで入れたところ30px全体に右にずれてしまいました。
ちょっとわたしの理解が及んでいない気がします。。。
今回は疑似要素で試してみたため別の方にベストアンサーつけさせていただきましたが、
padding-inline-startを初めて知るいい機会となりました。
また是非よろしくお願いいたします。ありがとうございました！