UIデザイン実装便利帳〜見出し編 No2 強調したい文字の下に蛍光ぺん風の下線を付ける方法

No2 強調したい文字の下に蛍光ぺん風の下線を付ける方法

HTML

html

<h1>見出しを<span class="text-highlight-line-thin">強調させる</span>デザイン
</h1>
<h1>見出しを<span class="text-highlight-line">強調させる</span>デザイン
</h1>
<h1>見出しを<span class="text-highlight-line-thick">強調させる</span>デザイン
</h1>

css

css

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 2rem;
  line-height: 4rem; 
  font-weight: 700;
}
.text-highlight-line-thin {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.text-highlight-line {
  background:linear-gradient(transparent 40%, #ff6 40%);
}
.text-highlight-line-thick {
  background:linear-gradient(transparent 20%, #ff6 20%);
}

下線を引くためのクラスと太さ調整方法

css

.text-highlight-line-thin {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.text-highlight-line {
  background:linear-gradient(transparent 40%, #ff6 40%);
}
.text-highlight-line-thick {
  background:linear-gradient(transparent 20%, #ff6 20%);
}