自定义下划线超过整个宽度（css）

I want a custom underline, the color will be different from time to time so i set it with jQuery.

我想要一个自定义下划线,颜色会不时不同,所以我用jQuery设置它。

$(".headline h1").css({
"text-decoration":"none",
"border-bottom":"2px solid #00ff0c", 
"padding":"0px"});

It only gives a underline as big as the paragraph, i only want the underline to be under the text itself. How can i do that?

它只给出了与段落一样大的下划线,我只希望下划线位于文本本身之下。我怎样才能做到这一点?

<h1 style="text-decoration: none; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 255, 12); padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Noord-Korea is niet van plan van koers te veranderen</h1>

4 个解决方案

#1

Add the following into your stylesheet:

将以下内容添加到样式表中:

h1 { display: inline-block; }

This will make the width of h1 only as wide as needed for its contents, as opposite to the default 100% width. But note this this also removes the default top and bottom margin of the element, so you may wish to set `margin-top' on the next element.

这将使h1的宽度仅与其内容所需的宽度相同,与默认的100%宽度相反。但请注意,这也会删除元素的默认顶部和底部边距,因此您可能希望在下一个元素上设置“margin-top”。

#2

You can put a span in the h1 that includes the text, then put the bottom border on that instead of on the h1. E.g.:

您可以在包含文本的h1中放置一个范围,然后将底部边框放在其上而不是h1上。例如。:

<h1><span style="text-decoration: none; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 255, 12); padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Noord-Korea is niet van plan van koers te veranderen</span></h1>

Live example

(Side note: I'd recommend moving the style data to a stylesheet rather than using a massive inline style attribute. But that's (ugh) a matter of style.)

(旁注:我建议将样式数据移动到样式表而不是使用大量的内联样式属性。但那是(呃)风格问题。)

#3

Give your text an inline element that wraps it like this...

给你的文本一个内联元素,像这样包装它...

<h1 style="text-decoration: none; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 255, 12); padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span>Noord-Korea is niet van plan van koers te veranderen</span></h1>

Then apply your style to that inline element.

然后将您的样式应用于该内联元素。

$(".headline h1 span").css({  "text-decoration":"none",  "border-bottom":"2px solid #00ff0c",   "padding":"0px"});

The reason for this is that h1 is a block-level element so it spans the entire width (like a paragraph); where as, span wraps just the word because it is an inline element.

原因是h1是块级元素,因此它跨越整个宽度(如段落);其中,span只包含单词,因为它是一个内联元素。

#4

Removing the border-bottom stuff and using text-decoration underline does solve your problem?

删除边框底部的东西并使用文本修饰下划线确实可以解决您的问题?

text-decoration: underline;


$(".headline h1").css({"text-decoration":"underline"});

#1