CSS text marker effect with animation & multi-line wrapping

text-marker-highlight-fill-animation.html

<style>
mark{
		animation: 1.5s highlight 1.25s 1 normal forwards;
		background-color: none;
		background: linear-gradient(90deg, theme('colors.amber.200') 50%, theme('colors.transparent') 50%);
		background-size: 200% 100%;
		background-position: 100% 0;
	}

	@keyframes highlight{
		to{
			background-position: 0 0;
		}
	}
 </style>

<p>
  This is a line with <mark>some text that is highlighted</mark> and will also correctly line-break, if multi-line.
</p>