多行动画文本下划线（从左到右绘制动画）

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

我想我遇到了同样的问题。我找到了一个决定，使用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();
});

Answer 2

也许您应该尝试使用 jQuery 的 How to select nth line of text (CSS/JS) 解决方案来指定每一行，然后使用您的 css。