样式的一半<hr>与另一半不同

Question

正如标题所暗示的那样,我试图将一半的样式<hr>与另一半不同,如下所示:

如您所见,左侧的一半<hr>是红色,略厚于右侧的薄灰色侧面.使用CSS可以实现这一点吗？谢谢!

Answer 1

对于该<hr>行,您可以使用css :before伪元素制作不同颜色的区域(请更改颜色和尺寸以符合您的设计):

hr {
    background-color: #555;
    border: none;
    display: block;
    height: 4px;
    overflow: visible;
    position: relative;
    width: 100%;
}

hr:before {
    background-color: #f90;
    content: '';
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    top: -2px;
    width: 20%;
    z-index: 1;
}

<hr>