Animated text underline for multiple lines (left to right drawing animation)

Question

I'm getting crazy about how to simulate the same effect i'm showing in de code below for a single line of text ( on hover ) on a multiple-line text.

.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>

As you can see, i can simulate this "underline" animation from left to right for a single line of text with an after, but i don't know how to do it for multiple line text, my problem is that i can't split it into lines easily because it's gonna be a dynamic text inserted into a dynamic container...

Any idea of how to achieve it?

Thank you very much!

Answer 1

Maybe you should try How to select nth line of text (CSS/JS) solution with jQuery to specify each line, then use your css.

Answer 2

I think I've come across the same problem. I've found a decision, using js. It works from ie11 (I didn't test below).
The main thing is to get width of every line.

Codepen

Pug:

.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();
});