How to create border bottom with 2 different color?

问题

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

How do I create the CSS?

回答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>

回答2:

use box-shadow with zero blur

syntax : box-shadow : x-offset y-offset blur radius color

example : box-shadow 0 0 0 1em red , 0 0 0 2em orange.

this will emulate a border of 1em red border and then a 1em orange border.

Note that orange color has a radius of 2em ( because half of it will be covered by red color)

来源：https://stackoverflow.com/questions/38137476/how-to-create-border-bottom-with-2-different-color