jquery - 自定义下划线覆盖整个宽度(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 { display: inline-block; }

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