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

前提

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を色々試してみましたがうまくいかずでして、、、ご教示お願いいたします。

コメントを投稿

0 コメント