サイト製作、特に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; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */

こちらで解決！

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


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