文字に下線を引きます。

文字の途中まで下線

サンプル

HOME

HTML

<div class="sample-01">HOME</div>
<div class="sample-02">HOME</div>
<div class="sample-03">HOME</div>

CSS

.sample-01 {
  display: inline-block;
  position: relative;
}

.sample-01::after {
  position: absolute;
  left: 50%;
  bottom: -1px;
  content: ' ';
  height: 3px;
  width: 70%;
  transform: translateX(-50%);
  background-color: #ffd700;
}

.sample-02 {
  display: inline-block;
  position: relative;
}

.sample-02::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  content: ' ';
  height: 3px;
  width: 70%;
  background-color: #ffd700;
}

.sample-03 {
  display: inline-block;
  position: relative;
}

.sample-03::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  content: ' ';
  height: 3px;
  width: 70%;
  background-color: #ffd700;
}

文章中の言葉

強調下線

border-bottom プロパティを使用するだけでも文字に下線が引けます。

今日の天気は晴れです！！

HTML

<div>今日の天気は<span class="sample-01">晴れ</span>です！！</div>
<div>今日の天気は<span class="sample-02">晴れ</span>です！！</div>
<div>今日の天気は<span class="sample-03">晴れ</span>です！！</div>
<div>今日の天気は<span class="sample-04">晴れ</span>です！！</div>

CSS

.sample-01 {
  border-bottom: solid 3px #87CEFA;
}

.sample-02 {
  border-bottom: dotted 3px orange;
}

.sample-03 {
  border-bottom: dashed 1px #87CEFA;
}

.sample-04 {
  border-bottom: double 6px orange;
}

最後に

特にありません。