如何创建双色边框？ [关闭]答案

【问题标题】：How I can create a border with double color? [closed]如何创建双色边框？ [关闭]
【发布时间】：2015-10-12 13:26:04
【问题描述】：

我需要一条有两种颜色组合的线条。谁能帮我画一条像附图中的线一样的线？

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

【问题讨论】：

使用伪元素（:before, :after）来达到你想要的效果
@LuisP.A.我如何使用伪元素是他们的任何示例，请分享..
@ArslanAli：这是否意味着同一行上有两种颜色（或）红色略高于图像中的灰色？
你需要它做什么？是菜单项的活动状态吗？
访问以下链接stackoverflow.com/a/14735816/4944490

标签： html css

【解决方案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;
  
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

感谢@pangloss 代码运行良好 :)

【解决方案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%)

&lt;div&gt;&lt;/div&gt;

【讨论】：