cssでアンダーライン

普通の下線（text-decoration: underline指定）

文字に被った下線（text-decoration: underline指定）

ストライプ柄の下線（linear-gradient指定）

文字に被った下線（linear-gradient指定）

グラデーションの下線（linear-gradient指定）

<p><span class="marker_ul1">普通の下線（text-decoration: underline指定）</span></p>

<p><span class="marker_ul2">文字に被った下線（text-decoration: underline指定）</span></p>

<p><span class="stripe-marker">ストライプ柄の下線（linear-gradient指定）</span></p>

<p><span class="marker_l1">文字に被った下線（linear-gradient指定）</span></p>

<p><span class="marker_l2">グラデーションの下線（linear-gradient指定）</span></p>



.marker_ul1 {
border-bottom:solid;
border-color:#87cefa;
border-width:5px;/*5ピクセルの太さにする*/
}

.marker_ul2 {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.stripe-marker {
  background-image: repeating-linear-gradient(-45deg, /* ストライプ柄の角度 */
    #87cefa 0, #87cefa 2px, /* ストライプの色1 */
    transparent 2px, transparent 4px /* ストライプの色2 */
  );
  background-repeat: no-repeat;
  background-position: left bottom; /* ストライプの起点を左下にする */
  background-size: 100% 0.5em; /* ストライプの横幅・縦幅 */
}

.marker_l1 {
  background: linear-gradient(transparent 60%, #87cefa 60%);
  background-repeat: no-repeat;
  background-position: left top 8px;
  background-size: 100% 20px; /* ストライプの横幅・縦幅 */
}

.marker_l2 {
  background: linear-gradient(transparent, #87cefa);
  background-position: left top 18px;
  background-repeat: no-repeat;
  background-size: 100% 20px; /* ストライプの横幅・縦幅 */
}


linear-gradientだと、テキストの行の領域より下に配置するのが難しいのが、text-decorationを使った方法であればそのような制約もないそうです。
以下を参照させていただきました。
text-decoration-skip-ink: none;という指定を使います。

https://zenn.dev/catnose99/articles/3239ba0d49cda9

ストライプや、グラデーションは、linear-gradientを使う感じになりそうです。



MORE POSTS