Анимированный текст подчеркивания для нескольких строк (анимация слева направо)

Question

Я схожу с ума от того, как имитировать тот же эффект, который я показываю в коде ниже для отдельной строки текста (при наведении) текст строки.

.underline-on-hover 
 
{ 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.underline-on-hover::after 
 
{ 
 
    content: " "; 
 
    background-color: red; 
 
    width:0; 
 
    position: absolute; 
 
    left:0; 
 
    bottom:0; 
 
    height:5px; 
 
    
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 

 
} 
 

 
.underline-on-hover:hover::after 
 
{ 
 
    width:100%; 
 
}

<p class="underline-on-hover"> 
 
I'm a single line text! 
 
</p> 
 
<br><br> 
 
<p class="underline-on-hover" style="max-width:200px"> 
 
I'm a multiple line text... let me prove it: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</p>

Как вы можете видеть, я могу смоделировать «подчеркнуть» анимацию слева направо для одной строки текста с после того, как, но я не знаю, как это сделать для многострочного текста моя проблема в том, что я не могу легко разбить ее на строки, потому что это будет динамический текст, вставленный в динамический контейнер ...

Любая идея о том, как его достичь?

спасибо!

Answer 1

Возможно, вам стоит попробовать How to select nth line of text (CSS/JS) решение с jQuery, чтобы указать каждую строку, а затем использовать свой css.

Answer 2

Я думаю, что я столкнулся с той же проблемой. Я нашел решение, используя js. Он работает от ie11 (я не тестировал ниже).
Главное, чтобы получить ширину каждой строки.

Codepen

МОПС:

.container 
    .text Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi exercitationem quos, facere ipsum perspiciatis labore dolores, quibusdam, culpa numquam deleniti nihil ad. Tempore beatae nobis facere deserunt nam dicta earum. 
br 
br 
div.test 

SCSS:

.text { 
    display: inline-block; 
    line-height: 1.2; 
} 

.container { 
    position: relative; 
} 

.line { 
    position: absolute; 
    width: 0; 
    height: 2px; 
    background: red; 
    transition: width .5s; 
} 

.container:hover line { 
    left: 0; 
    right: auto; 
} 

JS:

function multilineTextUnderline() { 
    var text = document.querySelector('.text'); 
    var words = text.innerText.split(' '); 
    var div = document.querySelector('.test'); 

    var initialText = text.innerText; 
    var widths = []; 
    var lineHeight = parseInt($(text).css('line-height'), 10); 
    var firstWord = 0; 
    text.innerText = words[0]; 
    var currentHeight = text.offsetHeight; 

    $('.test span').remove(); 
    $('.test br').remove(); 

    function getWidths() { 
    words.forEach(function(word, i) { 
     text.innerText = words.slice(firstWord, i + 1).join(' '); 
     if(currentHeight < text.offsetHeight) { 
      text.innerText = words.slice(firstWord, i).join(' '); 
      widths.push(text.offsetWidth); 
      firstWord = i; 

      var newSpan = document.createElement('span'); 
      newSpan.innerText = text.innerText; 
      div.appendChild(newSpan); 
      div.appendChild(document.createElement('br')); 

      if(i === words.length - 1) { 
      text.innerText = words[i]; 
      widths.push(text.offsetWidth); 

      var newSpan = document.createElement('span'); 
      newSpan.innerText = text.innerText; 
      div.appendChild(newSpan); 
      div.appendChild(document.createElement('br')); 
      } 
     } else if(i === words.length - 1) { 
      widths.push(text.offsetWidth); 

      var newSpan = document.createElement('span'); 
      newSpan.innerText = words.slice(firstWord).join(' '); 
      div.appendChild(newSpan); 
      div.appendChild(document.createElement('br')); 
     } 
    }); 
    } 

    getWidths(); 
    text.innerText = initialText; 
    console.log('  widhts: ', widths); 
    var controlWidths = []; 

    [].forEach.call(document.querySelectorAll('.test span'), function(span) { 
     controlWidths.push(span.offsetWidth); 
    }); 
    console.log('control widths: ', controlWidths); 

    //rendering underlines 
    var container = document.querySelector('.container'); 
    var containerWidth = container.offsetWidth; 
    var lines = []; 
    $('.line').remove(); 

    widths.forEach(function(lineWidth, i) { 
    var line = document.createElement('div'); 
    line.classList.add('line'); 
    line.style.top = lineHeight * (i + 1) - 2 + 'px'; 

    lines.push(line); 
    }); 

    lines.forEach(function(line) { 
    container.appendChild(line); 
    }); 

    container.addEventListener('mouseenter', function() { 
    lines.forEach(function(line, i) { 
     line.style.width = widths[i] + 'px'; 
     line.style.left = 0; 
     line.style.right = 'auto'; 
    }); 
    }); 
    container.addEventListener('mouseleave', function() { 
    lines.forEach(function(line, i) { 
     line.style.width = 0; 
     line.style.left = 'auto'; 
     line.style.right = containerWidth - widths[i] + 'px'; 
    }); 
    }); 
} 

multilineTextUnderline(); 

window.addEventListener('resize', function() { 

    multilineTextUnderline(); 
});