悬停时如何增加多行文本的下划线宽度

Question

代码中的兄弟们，

我正在尝试为<p> 标签之间的多行文本实现自定义text-decoration: underline; 效果。类似一个，如下图所示。

您愿意就这个问题分享一些想法或解决方案吗？您认为使用:before :after 仅使用 CSS 就可以实现结果，还是 JS 可以派上用场？

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

Answer 1

在做了一些research 之后，似乎可以在<p> 中添加<span> 并在其中添加box-shadow。这比border 效果更好，因为border 必须仅显示在文本下方。这允许下划线与文本相交。这是一个添加的元素，但它不需要您将所有内容分解到它自己的 <p> 元素中。

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

Answer 2

您可以使用repeating linear gradient，并在段落上设置display: inline，仅在文本下方绘制线条：

p {
  display: inline;
  font-size: 20px;
  line-height: 28px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 14px, rgba(128, 0, 128, 0.5) 14px, rgba(128, 0, 128, 0.5) 22px);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet elementum purus sed fermentum. Aliquam vehicula vel leo ut ullamcorper. <br /> Aenean condimentum justo massa, et eleifend quam elementum at. Mauris vulputate quam ut velit mattis, at pretium
  ex faucibus. Nulla facilisi. <br /> Quisque condimentum sapien ut diam lacinia, non commodo turpis faucibus. Ut in nisl nec magna lobortis tristique ac vitae ante. Cras egestas felis nec tortor varius rhoncus. Phasellus sagittis eget dolor ut condimentum.</p>

Answer 3

不确定是否可以在段落中注入跨度。如果可以的话，通过设置底部边框就足够简单了。

p:hover > span {
  border-bottom: 5px solid black
}

<p><span>Bacon ipsum dolor amet sausage ribeye pastrami, chuck sirloin filet mignon pancetta tail boudin ground round flank pork t-bone turducken. Venison boudin cupim bresaola corned beef meatball pork loin pancetta doner drumstick. Bresaola pork loin fatback pig turkey. Biltong bresaola shoulder cow shankle pork belly brisket ham hock chuck. Meatball drumstick salami pork loin.</span></p>

Answer 4

您可以将box-shadow 用于您的情况，如下所示：

.custom-underline {
    font-size:200%;
    font-weight:bold;
    margin: 0;
    display: inline-block;
}
.custom-underline:hover {
    box-shadow: inset 0 -15px 0 violet, inset 0 -3px 0 black
}

<p class='custom-underline'>Let the paint work</p>
<br>
<p class='custom-underline'>Share it with a friend</p>
<br>
<p class='custom-underline'>Just float around and be there</p>

Answer 5

将每个短语包装在 p 中，如下所示：

<p>
let the paint work21321321213123321321321  213 
</p>
<p>
let the paint work   
</p>
<p>
let the paint work   
</p>

css

p {
    height: auto;
    position: relative;
    width: 200px;
    }

 p::before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        width: 130%;
        left: 0%;
        border-bottom: 1px solid red;
    }

Answer 6

这就是你要找的吗？

我使用了:after pseudo-element 并给了它absolute position

渲染效果我在pseudo-element 中添加了一个底部边框，并使用-.35em top 将其提升一点，这导致它始终调整为主要元素的font-size。

工作示例：

p span {
  display:inline;
  position: relative;
  font-size: 30px;
  font-weight: 500;
  color: #27196e;
}

p:hover span:after {
  content: "";
  position: absolute;
  height:100%;
  width:100%;
  top: -.35em;
  left: 0;
  border-bottom: 8px solid rgba(111, 111, 255, .4)
}

<p>
<span>Let the paint work</span>
<br/>
<span>Share it with a friend</span>
<br/>
<span>Just float around and be there</span>
</p>