关于设置两条宠物水平线的问题

Question

请您查看一下这个演示，并让我知道如何将<hr>的样式设置为如下所示：

​

​

我试过这个：

hr {
    border-top: 3px solid red; 
    border-bottom: 3px solid blue; 
}

但我似乎需要使用::after Pseudo-element。谢谢

Answer 1

您可以使用:before：伪元素来完成它：

​

hr:before {
    content: "";
    width: 40px;
    height: 3px;
    background-color: #F8CC05;
    position: absolute;
    top: -4px;
    left: -1px;
}
hr {
    position: relative;
    color: #DDDDDD;
}

<hr />

​

Answer 2

就像这样。

hr:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 8px;
      border-bottom: 4px solid #F7C51E;
      width: 40px;
}