2020年04月06日

CSSで蛍光ペンのような下線を引く方法(1行編)

CSSで蛍光ペンのような下線を引く方法(1行編)

お世話になっております。SeekNextの佐藤です。
今回はCSSで蛍光ペンのような方法について書いていこうと思います。

以下のようなコードがあります。

HTML

<p>テキストテキストテキスト<span class="marker">テキストテキストテキストテキストテキスト</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

CSS

.marker {
  position: relative;
  display: inline-block;
}
.marker::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: .5em;
  width: 100%;
  background: #ff7f7f;
  z-index: -1;
}

見た目は以下のようになります。

是非参考にしてみてください!

複数行にマーカーを引きたいと困っている方はこちらを参考にしてみてください。