CODEWITHSUNDEEP
cssunderline
Jack Guy
Jack Guy

Reputation: 8523

Style thicker underline CSS

I wanted to add a thicker underline to my h1 tags so I used "border-bottom" as suggested in multiple Stack Overflow questions. However, the border extended well beyond the text, so I decided to add the display property "inline-block" to make the border conform to the text's bounds. This, however, made the element lack a line break after the content. I know I could always add the "br" tag, but I'd prefer to keep that in my styling. Is there anything I can do? Here is my current CSS:

h1
{
    font-weight:normal;
    margin-bottom:5px;
    border-bottom: 2px solid;
    display: inline-block;
}

Upvotes: 0

Views: 26598

Answers (3)

jake
jake

Reputation: 820

Since you don't always want border-bottom (eg, navigation item with padding), this method works better:

h1:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

If you want more or less space between the text and the underline, add a margin-top.

If you want a thicker underline, add more height: 

h1:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

Try display: table instead. It acts similar to inline-block in that it collapses down to to the width of its children, but prevents surrounding inline elements from flowing along side of it the same way an ordinary block element does.

http://codepen.io/cimmanon/pen/FvGxl

Upvotes: 7

ThinkingStiff
ThinkingStiff

Reputation: 65341

If the width of your <h1> text is fixed, you can set the width and keep it display: block;.

Demo: jsFiddle

Output:

enter image description here

CSS:

h1 {
    border-bottom: 2px solid black;
    font-weight:normal;
    margin-bottom:5px;
    width: 140px;
}

HTML:

<h1>underlined</h1>
next line

Upvotes: 3

Related Questions