css水平线空心 |css语句优先级

首先，在HTML中添加一个hr标签，这是创建水平线的最简单方式。然后，为hr标签添加一个class属性，例如“hollow-line”，这样大家可以在CSS中对这个元素进行样式定义。

<hr class="hollow-line">

接下来，在CSS中添加样式定义。首先，设置hr元素的颜色为透明，这样它就看不见了。然后，设置hr元素的高度为2px，宽度为100%。在这之后，设置hr的after伪元素的属性。设置为绝对定位，并且宽度为100%。这个空心效果依靠了after伪元素。

.hollow-line {
border: none;
height: 2px;
color: transparent;
background-color: transparent;
width: 100%;
position: relative:
}
.hollow-line::after {
content: '';
width: 100%;
height: 2px;
position: absolute;
top: -1px;
left: 0;
border: 1px solid black;
}

最后的结果是一个漂亮的空心水平线，可以用来增加页面设计的多样性。