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

※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。





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

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

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

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

お試しください。

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

dd{
border-bottom: solid 1px;
}

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

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

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

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




\応援ありがとうございます🌿/
各種ブログランキングに参加しています✨

アバター画像

Hiro先生

おかげさまで豊かさに満たされた日々を
今、素敵に生きています
感謝の種まきによって人生が根底から変わることを知って
素敵なご縁の輪を広げながら、
望む未来を叶える、奇跡を起こし続けるお手伝いをしています。

記事本文: 352