2021/01/30 (更新日: 2021/05/11)

【CSS】文字に下線を引く

プログラミング

html

<h2 class="section__title">Menu</h2>

css

.menu h2{
  margin-bottom: 88px;
  font-size:3.6em;
  border-bottom: solid;
}

サルワカさんのサイトに行って調べてきました。

【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）

HTMLでclass名をつけて、CSSで指定する

下線を引きたい文字に、クラス名をつけた<span>タグをつけます。

<h2 class="section__title"><span class="under">Menu</span></h2>

text-decorationを使う

.under{
  text-decoration: underline;
}

text-decoration: underline;では、下線の色は文字色と同じなので、下線の色を変えようとすると、文字の色まで変わってしまいます。

border-bottomを使う

要素のまわりに線を引くためのプロパティである　borderを使います。「border-bottom」にすれば、下線を引く指定になります。

.under{
  border-bottom: solid 5px #F2632D;
}

border-bottomを使って、下線を引くことができました。

• Tweet
• LINE
• facebook