自定義下划線超過整個寬度（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"});