Tan Kucukhas Tan Kucukhas - 1 year ago 73
HTML Question

horizontal line with two colors

I am trying the simulate the same effect on the picture for an html page. Is it possible to accomplish this without using an image or JS? I know it can be done horizontally by adding border color top and bottom but I couldn't find a way to do it horizantally.

enter image description here

Answer Source

You can add a grey border-bottom to your element and overlap it partially with a red ::after pseudo-element:

h1 {
  border-bottom: 2px solid #E5E5E5;
h1:after {
  content: '';
  display: block;
  border-bottom: 2px solid #EC1C24;
  margin-bottom: -2px;
  max-width: 200px;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download