Html 如何创建双色边框？

我需要一条有两种颜色组合的线。有人能帮我画一条像附件中的线吗

---

请查看我附加的图像并尽快帮助我。

我建议使用伪元素创建第二个边框，下面是简单的演示

div{
宽度：200px；
高度：20px；
边框底部：1px纯黑；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
底部：0；/*或-1px用于覆盖*/
左：50px；
宽度：100px；
内容：''；
边框底部：1px纯红；
}

---

我建议使用pseudo元素创建第二个边框，下面是一个简单的演示

div{
宽度：200px；
高度：20px；
边框底部：1px纯黑；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
底部：0；/*或-1px用于覆盖*/
左：50px；
宽度：100px；
内容：''；
边框底部：1px纯红；
}

---

你可以试试这样的东西

div{
宽度：300px；
高度：100px；
底边：2倍纯色灰色；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
内容：“；
宽度：50%；
高度：2倍；
背景：橙色；
底部：0px；
左：50%；
转换：转换（-50%，0%）

---

你可以试试这样的东西

div{
宽度：300px；
高度：100px；
底边：2倍纯色灰色；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
内容：“；
宽度：50%；
高度：2倍；
背景：橙色；
底部：0px；
左：50%；
转换：转换（-50%，0%）

---

使用伪元素（：before，：after）来实现您需要的功能want@LuisP.A.我如何使用伪元素是他们的任何例子，请分享。@ArslanAli：这意味着在同一行上有两种颜色（或）图中的红色略高于灰色？您需要它做什么？它是用于菜单项的活动状态吗？访问以下链接使用伪元素（：before，：after）来实现您需要的功能want@LuisP.A.我如何使用伪元素是他们的任何例子，请分享。@ArslanAli：这意味着在同一行上有两种颜色（或）红色略高于灰色，如图所示？您需要它做什么？它是用于菜单项的活动状态吗？访问以下链接谢谢@pangloss代码正常工作：）谢谢@pangloss代码正常工作：）