How to draw double bottom borders on title bar?

Question

How can I do something like the picture below?

I would like to have an extra thick line for all my h1s, but I'm not quite sure of the best practice for this.

HTML:

<h1>This is Our Work</h1>

CSS

h1{
  border-bottom: 1px solid #246cb4;
  display: inline-block;
}

h1:after {
  content: "";
  display: block;
  border: 1px solid black;
  width: 50px;
  margin-top: 0px;
  position: absolute;
}

Codepen :

Answer 1

In this case, you do not need pseudo-elements.

You can draw multiple background images using css3 linear-gradient()with precisely controlled size and positions:

h1 {
  background-image: linear-gradient(to right, #246cb4, #246cb4),
                    linear-gradient(to right, #246cb4, #246cb4);

  background-repeat: no-repeat;
  background-size: 100% 1px, 50px 3px;
  background-position: bottom 2px left, bottom 1px center;
}

h1{
  background-image: linear-gradient(to right, #246cb4, #246cb4),
    linear-gradient(to right, #246cb4, #246cb4);

  background-size: 100% 1px, 50px 3px;
  background-repeat: no-repeat;
  background-position: bottom 2px left, bottom 1px center;

  position: relative;
  display: inline-block;
}

<h1>This is Our Work</h1>

Run code

Answer 2

You need to add position:relativein h1and install margin:0 autoinh1:after

h1 {
   border-bottom: 1px solid #0D6CC4;
   display: inline-block;
   position:relative;
}
h1:after {
   content: "";
   display: block;
   border: 2px solid #0D6CC4;
   width: 50px;
   margin-top: 0px;
   position: absolute;
   right: 0;
   left:0 ;
   bottom:-2px;
   margin:0 auto;
}

<h1>This is Our Work</h1>

Run code

Answer 3

css

h1:after {
  content: "";
  display: block;
  border: 3px solid black;
  width: 50px;
  margin-top: 0px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: -3px;
}
h1 {
  border-bottom: 1px solid #246cb4;
  display: inline-block;
  position: relative;
}

Answer 4

, position.

h1{
  border-bottom: 1px solid #246cb4;
  display: inline-block;
  position: relative;
}

 h1:after {
  content: "";
  display: block;
  border: 2px solid black;
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: -1.5px;
}

<h1>This is Our Work</h1>

Answer 5

:after :before

 .main-title{
   text-align: center;
   }
.inner-title{
position: relative;
    font-size: 24px;
    padding: 0 0 15px;
    margin: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 1px;  
}

h1:before {
    position: absolute;
    content: '';
    width: 150px;
    left: 50%;
    margin-left: -75px;
    height: 1px;
    background: blue;
    bottom: 0;
}
h1:after {
    position: absolute;
    content: '';
    width: 50px;
    left: 50%;
    margin-left: -25px;
    height: 3px;
    background: blue;
    bottom: -1px;
}

 <div class="main-title" >
  <h1 class="inner-title">Sevices</h1>
</div>

Answer 6

Since you don’t know how long each tag will last h1, I suggest you move the element to the center of its parent, as in this example: http://codepen.io/anon/pen/jyMzqN

h1 {
  border-bottom: 1px solid #246cb4;
  display: inline-block;
  position: relative;
}

 h1:after {
   content: "";
   display: block;
   position: absolute;
   height: 3px;
   background-color: black;
   width: 50px;
   left: 50%;
   bottom: -2px;
   transform: translateX(-50%);
}