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

Question

代码中的兄弟，

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

您是否愿意分享一些针对此问题的想法或解决方案。您是否认为使用:before :after仅使用CSS可以获得结果，或者JS是否可以参与其中？

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

Answer 1

您可以使用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 2

在完成research之后，如果您在<span>内放置<p>并向其中添加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 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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

这是你要找的吗？

我使用:after pseudo-element并将其absolute position

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

工作示例：

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)
}

Answer 6

将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;
    }