html - 如何设置与另一半不同的 样式？

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>