Маркер-выделение

Жёлтый маркер «проводится» по ключевой фразе при появлении абзаца.

«Повторить» — в углу.

Хороший текст продаёт сам — а маркер расставляет акценты ровно там, где читатель должен замедлиться.

Код

…текст <span class="marker">выделенный маркером</span> дальше…

<style>
.marker {
  background: linear-gradient(104deg,
    rgba(255,214,64,0) 1%, #ffd640 3%,
    #ffd23f 97%, rgba(255,214,64,0) 99%)
    no-repeat 0 62%;                 /* полоса ниже середины строки */
  background-size: 0% 46%;           /* спрятана */
  padding: 0 .1em; border-radius: 4px;
}
.play .marker {
  animation: mk 1.1s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes mk { to { background-size: 100% 46%; } }
</style>

Промпт для ИИ

Сделай маркер-выделение текста: span с фоном-градиентом жёлтого маркера (104deg, прозрачные края 1%/99% — «рваные» кончики штриха), no-repeat, позиция 0 62% (ниже середины строки), background-size 0% 46%. При появлении блока в кадре — анимация background-size к 100% 46% за 1.1s с задержкой 0.3s: маркер «проводится» по тексту слева направо. Лучше всего на серифном тексте.