デザインコード紹介

Chapter2 見出しやテキストの装飾

テキスト装飾 – 蛍光ペンのような下線

更新日:

蛍光ペンのような下線のWebデザイン画像

HTML

<p>強調したいテキストに<span class="emphasis">マークをつけること</span>ができます。</p>

CSS

.emphasis {
  background-image: linear-gradient(rgba(0 0 0 / 0) 70%, #e5c046 70%);
}

できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。