CSSでマーカーラインを実装しよう

蛍光ペンで塗られたようなマーカー線をCSSで実装したのでメモです。

まずは失敗例
擬似要素でマーカー線を実装した例です。

HTML

<div class="box">
  <p>今日はとても暑かったです。気温は、東京で<span class="marker">40℃</span>って暑すぎだろ・・・</p>
</div>

CSS

.marker {
  position: relative;
}
.marker::after {
  content: '';
  background: orange;
  width: 100%;
  height: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

これでもちゃんとマーカー線になってます。
ただ問題なのはマーカー線の部分が、折り返しにかかったときだけ上手く表示されません。(折り返しがない場合ならこの方法でも問題なしです。)

僕が実装したいのは、折り返してもちゃんとマーカー線が表示させたいので、別の方法を試してみます。

html

<div class="box">
  <p>今日はとても暑かったです。気温は、<span class="marker">東京で40℃</span>って暑すぎだろー</p>
</div>

css

.marker {
  background: linear-gradient(transparent 50%, orange 0%);
}

上手く出来ましたね
linear-gradientで解決することができました！

線の太さはtransparentの値をいじるだけです。

注意点：iOS で見てみると透明になるはずだった部分が黒くなるようです。

解決方法は
background: linear-gradient(rgba(255, 141, 0, 0) 50%, orange 0%);
transparent の部分を rgba() に変更すれば解決です！