css多行分割线 |cssmodule 写伪元素

hr {
display: block;
border: none;
height: 1px;
background: black;
background-image: linear-gradient(to right, #ccc, #000, #ccc);
}

上述代码中的hr元素就是一个默认的水平分割线，用border:none;将默认的边框去掉，用height:1px;设置分割线的高度为1像素。最重要的是background-image属性，大家使用linear-gradient函数来生成渐变的背景颜色，这样就能让单一颜色的分割线更加生动和有趣了。to right是线性渐变的方向，从左至右。#ccc、#000和#ccc分别是线性渐变的三个颜色，从浅到深。

要使用多行分割线，大家只需要将hr元素设置为display:block;而不是默认的display:inline-block;即可。这样一来，多个hr元素不会挤在同一行，而是会自动换行。这种方法几乎不需要任何额外的设置，快捷简便，非常适用于那些需要分隔不同模块的网页。例如：

模块1
这是模块1的内容。
模块2
这是模块2的内容。
模块3
这是模块3的内容。

上述代码就是一个简单的例子，三个不同的模块之间用分割线分隔开来，看上去整齐清晰。

总结：使用CSS多行分割线可以极大地提高网页的可读性和美观度。有很多方式可以实现这一效果，而最常用的方法就是设置hr元素的display为block，一旦设置成功，分割线自然就可以实现多行分隔了。