CODEWITHSUNDEEP
htmlcss
MuchaZ
MuchaZ

Reputation: 421

How to apply two colors to bottom border of header tag?

I have a h2 tag with CSS:

h2 {
    display: inline-block;
    border-bottom: 3px solid #ffcc00;
    padding-bottom: 30px;
    color:  #5e5e5e;
    font-size: 23px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    margin: 30px 3px; }

It's looking like that:

[1]

But I want to fill "the rest of the width" with different border. It must look like that:

enter image description here

Upvotes: 1

Views: 1373

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371331

HTML

<h2>
    <span>Some header</span>
</h2>

CSS

h2 { 
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: lightgray;
}

span {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: orange;
    padding: 30px 3px;
    margin: 0 0 -2px 0;
    display: inline-block;
}

DEMO: http://jsfiddle.net/neowar2x/3/

Upvotes: 2

Domain
Domain

Reputation: 11808

use pseudo class :after http://www.w3schools.com/css/css_pseudo_classes.asp

h2{
    display: inline-block;
    border-bottom: 3px solid #ffcc00;
    padding-bottom: 30px;
    color:  #5e5e5e;
    font-size: 23px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    margin: 30px 3px;
    position:relative; /*add this*/
}

h2:after{
  content:'';
  display:inline-block;
  position:absolute;
  width:80%;
  background:#e6e6e6;
  height:3px;
  top:100%;
}

Upvotes: 0

Related Questions