【CSS】リストタグに点下線を敷く実践的な使い方

久しぶりにつまずいたのでメモ。
before,afterの疑似要素に下線を付けるのではなくspanタグで囲って下線を付ける。
下線の位置を調整するなら疑似要素を使うしかないのですが、before,afterの疑似要素の場合はwidth,height指定しないとだめなときがあるので。

【CSS】リストタグに点下線を敷く実践的な使い方

spanタグからはじめることで、リストの頭につける「リスト項目要素のマーカー（list-style-type）」には下線が付きません。

html

A.点線の下線をつけるテストなのですテレワーク中
B.点線の下線をつけるテストなのです身体がなまる。
C.点線の下線をつけるテストなのですよって腰痛が激しくなる

CSS

.testbox{
  padding:30px;
  margin:100px auto;
  background:#b0ddf7;
  width:80%;
  border-radius:10px;
}


ul.testbox li{
  list-style-type:armenian;
  font-size: 16px;
  font-weight: bold;
  margin-left:20px;
  padding:10px;


}

ul li span.uline{
    border-bottom: #fe0200 2px dashed;
}

.blueBig{
    color: #006fbf;
    font-size: 24px;
    font-weight: bold;
}

See the Pen
eYdeXmP by miccyome (@miccyome)
on CodePen.