Question

最近我注意到text-decoration: underline无法动画（转换）。经过一些研究，我发现最好和最常见的解决方案是使用border-bottom。但正如您将在下面的代码段中看到的那样，border-bottom在这种情况下不是最佳解决方案。

#borderText {
 border-bottom: 1px solid white; 
 transition: .5s;
}

#borderText:hover {
  border-bottom: 1px solid black;
}

#textDecor {
  text-decoration: none;
  transition: .5s;
  }

#textDecor:hover {
  text-decoration: underline;
  }

<p id="borderText">
  Lorem Ipsum Sit Amet<br />
  Some other Text<br />
  Some Other Text<br />
</p>

<p id="textDecor">
  Here is some text<br />
  with text-decoration and<br />
  as you should see, the text<br />
  is underlined but cannot be transitioned<br />
</p>

为了澄清，我将解释问题和目标：

问题：如何使用多行文字转换文字下划线？

目标：要有效解决上述问题，希望没有任何黑客攻击。

现在，如果没有某些黑客攻击是不可能的，我个人怀疑，提供简单的黑客攻击，请不要标记荒谬，例如将每个单词放在span元素中。

Answer 1

#borderText {
 border-bottom: 1px solid white; 
 transition: .5s;
 display: inline;
cursor: pointer;
}

#borderText:hover {
  border-bottom: 1px solid black;
}

#textDecor {
  text-decoration: none;
  transition: .5s;
  }

#textDecor:hover {
  text-decoration: underline;
  }

<p id="borderText">
  Lorem Ipsum Sit Amet<br />
  Some other Text<br />
  Some Other Text<br />
</p>

<p id="textDecor">
  Here is some text<br />
  with text-decoration and<br />
  as you should see, the text<br />
  is underlined but cannot be transitioned<br />
</p>

#borderText {
 border-bottom: 1px solid white; 
 transition: .5s;
}

#borderText:hover {
  border-bottom: 1px solid black;
}

#textDecor {
  text-decoration: none;
  transition: .5s;
  }

#textDecor:hover {
  text-decoration: underline;
  }

<p id="borderText">
  Lorem Ipsum Sit Amet<br />
  Some other Text<br />
  Some Other Text<br />
</p>

<p id="textDecor">
  Here is some text<br />
  with text-decoration and<br />
  as you should see, the text<br />
  is underlined but cannot be transitioned<br />
</p>

#borderText {
 border-bottom: 1px solid white; 
 transition: .5s;
}

#borderText:hover {
  border-bottom: 1px solid black;
}

#textDecor {
  text-decoration: none;
  transition: .5s;
  }

#textDecor:hover {
  text-decoration: underline;
  }

<p id="borderText">
  Lorem Ipsum Sit Amet<br />
  Some other Text<br />
  Some Other Text<br />
</p>

<p id="textDecor">
  Here is some text<br />
  with text-decoration and<br />
  as you should see, the text<br />
  is underlined but cannot be transitioned<br />
</p>

#borderText {
 border-bottom: 1px solid white; 
 transition: .5s;
}

#borderText:hover {
  border-bottom: 1px solid black;
}

#textDecor {
  text-decoration: none;
  transition: .5s;
  }

#textDecor:hover {
  text-decoration: underline;
  }

<p id="borderText">
  Lorem Ipsum Sit Amet<br />
  Some other Text<br />
  Some Other Text<br />
</p>

<p id="textDecor">
  Here is some text<br />
  with text-decoration and<br />
  as you should see, the text<br />
  is underlined but cannot be transitioned<br />
</p>

转换多行文本的下划线

1 个答案: