CSS style heading - the background should only cover text with a lower border

Question

I am trying to create a header like this:

But I need help because I can’t get it right.

I planned to use a gradient, but should only have a heading text (with some addition) with a background color, and the gradient changes color at a specific point in the table cell. The title can be in different words - long and short - so the background color cannot be stopped at a specific point. I also need the width of the cell to be underlined (border-bottom).

I'm not sure if my HTML needs to be changed, or my CSS needs to be changed either in both cases, or if this can be done.

My HTML is:

<div class="wrapper"> <div class="row"> <div class="heading">Heading</div> </div> <div class="row"> <div class="stuff">Just some stuff.</div> </div> </div> 

My CSS code is:

 .wrapper { border-spacing: 0px 0px; display: table; width: 100%; } .row { display: table-row; } .heading { border-bottom: 2px solid red; background-color: lime; color: blue; direction: ltr; display: table-cell; font-weight: bold; min-height: 25px; overflow: hidden; padding: 2px; padding-left: 30px; padding-right: 30px; text-align: left; text-transform: uppercase; vertical-align: top; } .stuff { width: 100%; display: table-cell; } 

Answer 1

You must adjust the width of your title to occupy only its content. A common hack is to simply use display: inline-block . I changed a few of your styles and markup to create a lower border effect. Your wrapper and stuff classes were redundant, so I removed them.

JSFiddle : http://jsfiddle.net/mkmeLzjL/11/

HTML

 <div class="row"> <div class="heading">Profile</div> </div> <br> <div> <div>Just some stuff.</div> </div> 

CSS

 @import url(http://fonts.googleapis.com/css?family=Open+Sans); * { font-family: Open Sans; } .row { border-bottom: 2px solid black; } .heading { background-color: black; color: white; display: inline-block; font-weight: bold; padding: 7px 30px 7px 15px; font-size: 20px; text-transform: uppercase; } 

Answer 2

Here's a solution using a pseudo-element: http://jsfiddle.net/npeqzm32/ .

HTML:

 <div class="wrapper"> <div class="row"> <h1>Heading</h1> </div> <div class="row"> <div class="stuff">Just some stuff.</div> </div> </div> 

CSS

 * { margin: 0; padding: 0; border: 0; } body { padding: 10px; } .row { position: relative; } .row h1 { font: bold 20px/2 Sans-Serif; background-color: #222; color: white; display: inline-block; padding: 0 10px; text-transform: uppercase; letter-spacing: 1px; } .row h1:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: #222; } 

Answer 3

I made some changes to bring out some similar ones that you want.

DEMO HERE

HTML

 <div class="wrapper"> <div class="row"> <div class="heading">Heading</div> </div> </div> 

CSS

 .row { border-bottom:4px solid black; } .row .heading { display:inline-block; background-color:#111; color:#fff; font-size:24px; font-family:calibri; font-weight:bold; padding:10px 20px; }