CSSで点線を引く時のポイント

日々のエラーやできなかった事、解決方法をシェアしていきます。

今日はCSSでの点線の引き方です。

html 

<p>点線を引きたい</p>

css

p {
 border-bottom: 2px dotted pink;
} 

これで2pxの太さのピンク色の点線が引きますが、ブロック要素の為、文字の下だけでなく、画面いっぱいに線が伸びてしまいます。私はここで目視で幅をwidth: 300px;と変えてなんとか文字の下にだけ線を引きました。

が、、、こんな幅を目分量で決めなくてもいいんです！

ここで登場するのが、display: inline;または、display: inline-block;　これを追加するとブロック要素からインライン要素に代わるので、文字の下にだけ線が引かれます。

最後に、コードをまとめると

p {
 border-bottom: 2px dotted pink;
 display: inline;　または　display: inline-block;
}