強調アンダーラインを擬似要素を使わずにcssで

  

サイト製作、特にLPのデザインなどでよく出てくる
太めのマーカーでテキストにアンダーラインを装飾する時cssの 
text-decoration:underline;
だけでは物足りないと思います。

before,afterなどの擬似要素を使っても表現できますが、ブラウザによって挙動が異なる
ことがあります。そんな時は

 text-decoration: underline;
  text-decoration-thickness: 8px; /* 線の太さ */
  text-decoration-color:#c4f0ff;
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない(線が途切れない) */

こちらで解決!

色々太さや色を変更して試してみてください!


最後までお読みいただきありがとうございます!