リストタグ(ul・ol)のマーク下までborderを伸ばす方法

ブログで箇条書きするときは、リストタグ（ulタグ・olタグ）を使うのが最適です。
実際にリストタグを使った箇条書きが、以下の通り。

これでも十分ですが、項目間に罫線を入れた方が見やすいと思いました。
そこで入れたのですが、先頭のマーク（点のこと）まで伸びない問題が出たのです。

当記事では、罫線を入れる方法、それと罫線をマーク下まで入れる方法を紹介します。

完成形

See the Pen
Untitled by Rino (@Rinosaurus)
on CodePen.

調整前はマーク下まで罫線が入っていないので、調整後のように直していきます。

完成までのプロセス

罫線を表示させる

罫線を表示させる方法は簡単で「border」を使います。

		li {
			border: 1px solid #000;
		}
	

ただ、これだと項目の周囲に線が引かれる他、罫線が重なりあう部分が太く見えてしまいます。
そのため、上記は止めて以下のように改良しました。

		li:not(:first-child) {
			border-top: 1px solid #000;
		}
	

項目の2番目から「上部に罫線を入れる」という指示に変更しました！

こうすることで、罫線が重なりあうことが無くなり、綺麗に表示されます。

》テキストなどの周囲に線（ボーダー / border）を引く方法を解説

要素の下まで伸ばす

ボーダーを付けることで、罫線が表示されました！
しかし、このままだと先頭のマーク（点のこと）まで罫線が伸びていません。

これを解決するため、CSSを以下に追加しました。

		/* Before */
		li:not(:first-child) {
			border-top: 1px solid #000;
		}
	

		/* After */
		.list-flame li {
			list-style-position: inside;
		}
		li:not(:first-child) {
			border-top: 1px solid #000;
		}
	

liタグに「list-style-position:inside;」を追記して、マーク下までボーダーを伸ばせました！
ただ、マークが左隅に寄りすぎているので、以下のように改良します。

		.list-flame {
			margin-left: -2em;
		}
		.list-flame li {
			list-style-position: inside;
			padding-left: 1em;
		}
		.list-flame li:not(:first-child) {
			border-top: 1px solid #000;
		}
	

これで完成形と一緒になりました！

まとめ

すでにリストタグの余白が調整されている場合、紹介した「padding・margin」の値ではズレることがあるので、ご注意ください。