CODEWITHSUNDEEP
htmlcss
user1261774
user1261774

Reputation: 3695

CSS style heading - background must cover only text with a bottom border

I am trying to style a heading just like this:

enter image description here

But I need some help as I cannot get it correct.

I was planning on using gradient, but I must have only the text of the heading (with some padding) with a background color and gradient changes colour at a specific point in the table cell. The heading can be different words - some long & some 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 am unsure if my HTML needs changing or my CSS needs changing or both or if this can be done.

My HTML code:

<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:

.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;
}

Upvotes: 7

Views: 6011

Answers (3)

Henry Zhu
Henry Zhu

Reputation: 2618

You should adjust the width of your heading to occupy that of only its contents. A common hack is to simply use display: inline-block. I changed a few of your styles and markup to create the 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;
}

Upvotes: 4

DRD
DRD

Reputation: 5813

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;
}

Upvotes: 2

Rohit416
Rohit416

Reputation: 3486

I have made some changes to output somewhat similar what 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;
}

Upvotes: 0

Related Questions