【CSS】文字に下線を引く
![](https://manablog.org/wp-content/uploads/2016/11/animal.jpg)
怠け者ブロガー「セクションタイトルの文字の下に、文字幅だけに線を引きたい。文字幅を超えて、長い線になってしまう。どうしたらいい?」
html
<h2 class="section__title">Menu</h2>
css
.menu h2{
margin-bottom: 88px;
font-size:3.6em;
border-bottom: solid;
}
![](https://lily-blog.net/wp-content/uploads/2021/01/0cb238220b2269143ebf1f308731c504.jpg)
サルワカさんのサイトに行って調べてきました。
【CSS】文字に色々なデザインの下線を引く(点線・波線・二重線・蛍光ペン風など)
HTMLでclass名をつけて、CSSで指定する
下線を引きたい文字に、クラス名をつけた<span>
タグをつけます。
<h2 class="section__title"><span class="under">Menu</span></h2>
text-decorationを使う
.under{
text-decoration: underline;
}
![](https://lily-blog.net/wp-content/uploads/2021/01/46d956ebe165c8977d1b03c4b466536b.jpg)
text-decoration: underline;
では、下線の色は文字色と同じなので、下線の色を変えようとすると、文字の色まで変わってしまいます。
![](https://lily-blog.net/wp-content/uploads/2021/01/496830e393356b60c148d1d7b2940d5e.jpg)
border-bottomを使う
要素のまわりに線を引くためのプロパティである border
を使います。「border-bottom」にすれば、下線を引く指定になります。
.under{
border-bottom: solid 5px #F2632D;
}
![](https://lily-blog.net/wp-content/uploads/2021/01/c4e036eeff84e50332c1ad72efba0f6f.jpg)
border-bottom
を使って、下線を引くことができました。