kenzo-tanaka

/* 黄色 */
.underline1 {
    color: #333;
    text-decoration: none;
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, .69) 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.1s;
}

kenzo-tanaka

<!-- 黄色 -->
<span class="underline1">ここは重要な箇所です。</span>

<!-- 青色 -->
<span class="underline2">ここは、ネガティブな表現箇所です。</span>

<!-- 緑色 -->
<span class="underline3">ここは、事実を書いています。</span>

kenzo-tanaka

<span class="underline1">ここは重要な箇所です。</span>

kenzo-tanaka

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>	
  <script>
    $(function(){
      var swiper = new Swiper('.swiper-container', {
        autoplay: 2000,
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
            },