Search code examples
htmlline

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

Solution

  • 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;
}
    <h1>Haberler</h1>