How to create border bottom with 2 different color?

Question

I need to create border bottom with two different color like below picture

How do I create the CSS?

Answer 1

You can use css pseudo classes i.e :after or :before.

h3 {
  margin: 0;
  padding-bottom: 7px;
  position: relative;
  border-bottom: 2px solid #ccc;
}

h3:before {
  position: absolute;
  background: brown;
  height: 2px;
  content: '';
  width: 50px;
  bottom: -2px;
  left: 0;
}

<h3>Last Recent Post</h3>

And you can use css gradient as well:

h3 {
  margin: 0;
  padding-bottom: 7px;
  position: relative;
}

h3:before {
  position: absolute;
  background: linear-gradient(to right, brown 50px, #ccc 50px);
  height: 2px;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
}

<h3>Last Recent Post</h3>