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

您可以在包含文字的span中添加h1，然后在其上放置底部边框而不是h1。 E.g：

<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

（旁注：我建议将样式数据移动到样式表而不是使用大量的内联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"});

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

4 个答案: