<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;
}
}
This Pen doesn't use any external CSS resources.