HTML – 从另一半不同的样式的一半

正如标题所暗示的那样,我正试图设计一半的< hr>与另一半不同,像这样：

如您所见,< hr>的左半部分.是红色的,比右边的薄灰色边厚一点.使用CSS可以实现这一点吗？谢谢！

解决方法

对于< 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>