【CSS】borderの線が長すぎるため幅、長さを調整する方法

2021年6月24日CSS

CSSで大活躍するborderについて
例えば、border-bottomで下線を引いたとしよう

ホントは文字だけに下線を引きたいのだが
色んな条件によって文字だけを指定できず
文字エリア全体を指定せざるおえない場合

そのままだと画面いっぱいに下線が引かれ
見栄えが非常に悪くなります。

そこである程度短くしたい場合、
今回の内容を追加することで
ある程度、見た目が良くなります。

お試しください。

①幅広になってしまうパターン

dd{
border-bottom: solid 1px;
}

②幅を指定して調整するには「width:300px;」などを追加する

dd{
border-bottom: solid 1px;
width: 300px;
}

これで画面一杯の下線だったのが
３００px幅の下線になります。

必要に応じて数値を修正してお試しください。