<p>
  <span class="marker--001">このように文字にマーカーが引かれます</span>
</p>
<p>
  <span class="marker--002">マーカーを細くすることも出来ます</span>
</p>
<p>
  <span class="marker--003">もちろん色を変えることも出来ます</span>
</p>
.marker--001 {
  background-image: linear-gradient(90deg, rgb(252, 214, 158) 90%, transparent);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0 bottom;
  animation: marker-move 3s ease infinite;
}

.marker--002 {
  background-image: linear-gradient(90deg, rgb(252, 214, 158) 90%, transparent);
  background-repeat: no-repeat;
  background-size: 200% 30%;
  background-position: 0 bottom;
  animation: marker-move 3s 1s ease infinite;
}

.marker--003 {
  background-image: linear-gradient(
    90deg,
    rgb(252, 247, 126) 100%,
    transparent
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0 bottom;
  animation: marker-move 3s 2s ease infinite;
}

@keyframes marker-move {
  0% {
    background-position: right -100% bottom;
  }
  100% {
    background-position: 0 bottom;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js