Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

蛍光ペンで塗られたようなマーカー線を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%);
}

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

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

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

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

melon_guma
備忘録っす!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away