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

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的HTML相关文章