パーツ番号 02-15-05 ・ JavaScript使用

蛍光マーカーハイライト

蛍光ペンで線を引くように単語の背後を黄色の帯が横切ります。WordPressの本文中でユーザーに読んでほしい一文を目立たせるのに便利です。

プレビュー

ソースコード

HTML

<p class="d02-15-05-line">申込はとても<span class="d02-15-05-mark">かんたん</span>です</p>

CSS

.d02-15-05{background:#fff}
        .d02-15-05-line{margin:0;font-size:20px;font-weight:700;color:#1f2937}
        .d02-15-05-mark{position:relative;padding:0 2px}
        .d02-15-05-mark::before{content:"";position:absolute;left:0;bottom:2px;width:0;height:.55em;background:#fde047;opacity:.65;z-index:-1;border-radius:2px}
        .d02-15-05-mark.d02-15-05-active::before{animation:d1805sweep 1.2s ease-out forwards}
        @keyframes d1805sweep{to{width:100%}}
        @media (prefers-reduced-motion: reduce){.d02-15-05-mark::before{width:100%!important;animation:none!important}}

JavaScript

(function(){
        var mark=document.querySelector('.d02-15-05-mark');if(!mark)return;
        function play(){
          mark.classList.remove('d02-15-05-active');
          void mark.offsetWidth;
          mark.classList.add('d02-15-05-active');
        }
        play();
        setInterval(play,3000);
      })();

クラス名 .d02-15-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。