[英]How to increase width of underline for the multiline text when on hover
Fellow brothers in code,代码中的兄弟们,
I am trying to achieve custom text-decoration: underline;
我正在尝试实现自定义
text-decoration: underline;
effect for the multiline text between <p>
tags. <p>
标签之间的多行文本效果。 Similar to one, showed in the picture below.类似于一个,如下图所示。
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?您认为仅使用 CSS 就可以使用
:before
:after
来实现结果,还是 JS 可以派上用场?
Many thanks for all possible help.非常感谢所有可能的帮助。 Will be looking forward.
会很期待。
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.在做了一些研究之后,如果你在
<p>
里面放一个<span>
<p>
并添加一个box-shadow
似乎可以做到。 This works better than a border
because the border
has to be displayed below the text only.这比
border
效果更好,因为border
必须仅显示在文本下方。 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.这是一个添加元素,但它不需要您将所有内容都分解为它自己的
<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>
You can use a repeating linear gradient , and set display: inline
on the paragraph to draw the lines only under the text:您可以使用重复线性渐变,并在段落上设置
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>
Not sure if you can inject a span into the paragraph.不确定您是否可以在段落中注入一个跨度。 If you can, it is simple enough by setting the bottom border.
如果可以,通过设置底部边框就足够简单了。
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>
You can use box-shadow
for your case like this:您可以为您的案例使用
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>
Is this what you're looking for?这是你要找的吗?
I used the :after
pseudo-element and gave it absolute
position我使用了
:after
伪元素并给了它absolute
位置
Te render the effect I added a bottom-border to the pseudo-element
and lift it up a little bit with a -.35em
top
which result in it always adjusting to the main element's font-size
. Te 渲染效果 我为
pseudo-element
添加了一个底部边框,并用-.35em
top
将它抬起一点,这导致它总是调整到主元素的font-size
。
Working example:工作示例:
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>
Wrap every phrase inside a p
, like this:将每个短语包裹在
p
,如下所示:
<p>
let the paint work21321321213123321321321 213
</p>
<p>
let the paint work
</p>
<p>
let the paint work
</p>
css 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.