How I can create a border with double color?

Question

I need a line with two color combinations. Can anyone help me make a line like the line in the attached image?

Please review the image I attached and help me as soon as possible.

Use pseudo elements (:before , : after) to achieve what you want — Luís P. A., Oct 12 '15 at 13:29
@LuisP.A. How I can use pseudo elements is their any example you have please share.. — Arslan Ali, Oct 12 '15 at 13:30
@ArslanAli: Is that meant to be two colors on same line (or) the red slightly above gray like in the image? — Harry, Oct 12 '15 at 13:31
What do you need it for? Is it for an active status for a menu item? — Aessandro, Oct 12 '15 at 13:38
visit following link http://stackoverflow.com/a/14735816/4944490 — Krupesh Kotecha, Oct 12 '15 at 13:51

score 4 · Accepted Answer · answered Oct 12 '15 at 13:31

4

I suggest to use pseudo element to create the 2nd border, simple demo follows.

div {
  width: 200px;
  height: 20px;
  border-bottom: 1px solid black;
  position: relative;
}
div:after {
  position: absolute;
  bottom: 0; /* or -1px for covering it */
  left: 50px;
  width: 100px;
  content: '';
  border-bottom: 1px solid red;
  
}

<div></div>

answered Oct 12 '15 at 13:31

Stickers

75,527
23
147
186

Thanks @pangloss code is working fine :) – Arslan Ali Oct 13 '15 at 09:30

score 2 · Answer 2 · answered Oct 12 '15 at 13:31

You can try something like this

div {
  width: 300px;
  height: 100px;
  border-bottom: 2px solid grey;
  position:relative;
}
div:after {
  position: absolute;
  content: "";
  width: 50%;
  height: 2px;
  background: orange;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%)

<div></div>

How I can create a border with double color?

2 Answers2