Search code examples
htmlcsscss-shapes

How to draw dual bottom borders on a heading?

How can I do something like the picture below?

enter image description here

I would like to have an extra thick line to all my h1's but am not quite sure of a best practice to do it.

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:

Solution

  • You don't need any pseudo elements in this case.

    You can draw multiple background images with 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>