如何在懸停時增加多行文本的下划線寬度

Question

代碼中的兄弟們，

我正在嘗試實現自定義text-decoration: underline; <p>標簽之間的多行文本效果。 類似於一個，如下圖所示。

你介意分享一些關於這個問題的想法或解決方案嗎？ 您認為僅使用 CSS 就可以使用:before :after來實現結果，還是 JS 可以派上用場？

非常感謝所有可能的幫助。 會很期待。

Answer 1

在做了一些研究之后，如果你在<p>里面放一個<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 2

您可以使用重復線性漸變，並在段落上設置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

這是你要找的嗎？

我使用了:after 偽元素並給了它absolute位置

Te 渲染效果 我為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>

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