Question

I want a custom underline, the color will be different from time to time so i set it with 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>

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