<span class="yellow">黄色マーカーで文字を囲んだ感じ</span>
<hr>
<span class="marker-yellow">黄色のマーカークラスつけ</span>
<hr>
<span class="marker-yellow-futo">黄色のマーカークラスつけ</span>
<hr>
<span class="marker-pink">ピンクのマーカークラスつけ</span>
<hr>
<span class="marker-pink-futo">黄色のマーカークラスつけ</span>

.yellow {
  background-color: #ff9;
}

.marker-yellow {
  background: linear-gradient(transparent 40%, #ff9 40%);
}

.marker-yellow-futo {
  background: linear-gradient(transparent 10%, #ff9 10%);
}

.marker-pink {
  background: linear-gradient(transparent 80%, #ff99cc 80%);
}

.marker-pink-futo {
  background: linear-gradient(transparent 10%, #ff99cc 10%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.