CSSで文字にマーカーを引いて装飾する方法【コピペで簡単！】

CSSで文字にマーカーを引いて装飾する方法を紹介します。

CSSで文字にマーカーを引いて装飾するサンプルコード

HTML

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

CSS

.marker {
  background:linear-gradient(transparent 60%, #fdf2a9 60%);
}

#fdf2a9となっている部分を変更すれば、好きな色が使えます。

サンプル

テキストテキストテキスト

文字全体に線を引く

HTML

<span class="marker2">テキストテキストテキスト</span>

CSS

.marker2 {
  background:linear-gradient(transparent 0, #fdf2a9 0);
}

サンプル

テキストテキストテキスト

点線マーカーを引く

HTML

<span class="marker3">テキストテキストテキスト</span>

CSS

.marker3 {
  position: relative;
}
.marker3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  margin: auto;
  background-image: linear-gradient(to right, #fdf2a9, #fdf2a9 12px, transparent 12px, transparent 20px);
  background-size: 20px 6px;
  background-repeat: repeat-x;
  z-index: -1;
}

サンプル

テキストテキストテキスト