在标题标签上显示内联块

Question

1. So i would like to add a border to a h3 tag.
2. This border needs to span the width of the longest part of the visible text and no futher.
3. Currently this border seems to span the entire width of the wrapping div.

Seems weird to me that adding display inline block to ah tag doesn't provide me with the results I was after.

 div { max-width: 180px; } h3 { display: inline-block; border-bottom: 2px solid green; } 

 <div> <h3>Lorem Ipsum Dolar.....</h3> </div> 

EDIT: Seems that some of you don't get that the max-width is required.

This is how it sould line up.

Hmmm... Seems that a perfect solution isn't possible with CSS. But I've used @Muhammad Usman example and added bottom: -120%; and replaced the height and background with border properties. which works for 2 lines of text.

 div { max-width: 200px; border: dashed 1px grey; } h3 { display: inline; font-size: 1.6em; position: relative; } h3::after { border-bottom: 4px solid green; bottom: -120%; content: ""; left: 0; position: absolute; right: 0; } 

 <div> <h3>Lorem Ipsum Dolar</h3> <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p> </div> 

Answer 1

Just erase the max-width and only use display: inline-block

 div { } h3 { display: inline-block; border-bottom: 2px solid green; } 

 <div> <h3>Lorem Ipsum Dolar.....</h3> </div> 

Answer 2

Is that what you want?

 div { max-width: 180px; width:111px; } h3 { display: inline-block; border-bottom: 2px solid green; } 

 <div> <h3>Lorem Ipsum Dolar.....</h3> </div> 

Answer 3

Add Display:inline property for your "div"

 div {
        max-width: 180px;
        display: inline;
    }

Answer 4

 div { max-width: 180px; } h3 { position: relative; display: inline; } h3:before { position: absolute; background: green; content: ''; height: 2px; left: 0; right: 0; bottom: -4px; } 

 <div> <h3>Lorem Ipsum Dolar Lorem Ipsum Dolar gnhhjkui abc .....</h3> </div> 

Answer 5

So I thought I would update this question as no one else has found the answer.

It is possible when using flexbox, just wrap the title tag with a div and apply flex to it.

 div { max-width: 200px; border: dashed 1px grey; } div.flex { display: flex; flex-flow:row wrap; } h3 { display: inline; font-size: 1.6em; border-bottom: 4px solid green; } 

 <div class="flex"> <h3>Lorem Ipsum <br>Dolar</h3> <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p> </div>