CSS

【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.

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-CSS
-

© 2021 さくらいらぼWEB版 /個人ブログ