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

Question

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

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

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

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

Answer 1

您可以在包含文本的h1中放置一个span ，然后将底部边框放在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>

实例

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

Answer 2

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

h1 { display: inline-block; }

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

Answer 3

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

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

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

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

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

Answer 4

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

text-decoration: underline;


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