悬停时如何增加多行文字的下划线宽度 [英] How to increase width of underline for the multiline text when on hover

问题描述

代码中的兄弟，

我正在尝试实现自定义的 text-decoration：下划线； 的效果< p> 标记之间的多行文本。类似于下图所示。

I am trying to achieve custom text-decoration: underline; effect for the multiline text between <p> tags. Similar to one, showed in the picture below.

您是否愿意针对此问题分享一些想法或解决方案。您是否认为仅使用CSS使用：before ：after 即可达到结果，还是JS的情况牵手吗？

Would you mind to share some ideas or solutions for this problem. Do you think it is possible to achieve result with only CSS using :before :after or is it a case for JS to come in hand?

非常感谢您提供的所有可能的帮助。
会很期待。

Many thanks for all possible help. Will be looking forward.

推荐答案

做完研究，看来如果将< span> 放在< ; p> 并在其中添加 box-shadow 。这比 border 更好，因为 border 只必须显示在文本下方。这样可以使下划线与文本相交。这是一个添加的元素，但是它不需要您分解所有它自己的< p> 元素。

After doing a bit of research it seems it can be done if you put a <span> inside the <p> and add a box-shadow to that. This works better than a border because the border has to be displayed below the text only. This allows the underline to intersect the text. This is an added element, but it doesn't require that you break up everything in it's own <p> element.

.underline{
  max-width: 240px;
  font-family: sans-serif;
  font-size: 20px;
}

.underline:hover span{
  box-shadow: inset 0 -10px lightblue;
}

  <p class="underline">
    <span>Pick some apples.<br>
    Make some juice. with more text so long that it wraps.<br>
    ????<br>
    Profit!
    </span>
  </p>

这篇关于悬停时如何增加多行文字的下划线宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！