如何创建双色边框？

Question

我需要一条有两种颜色组合的线条。任何人都可以帮我制作像附加图像中的线条一样的线条吗？

请查看我附上的图片，并尽快帮助我。

Answer 1

我建议使用伪元素来创建第二个边框，然后是简单的演示。

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>

Answer 2

您可以尝试这样的事情

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>