/* 使用伪元素 :before 和 content 属性来插入一条横线 */ h2:before{ content: ""; display: block; border-bottom: 1px solid black; margin: 10px 0; }
上面的代码可以在一个标题下面加上一条横线,它使用了伪元素和content属性来插入一条位置随意的横线。使用这种方法的好处是不仅可以使网页排版更美观,同时还可以加强阅读效果,突出重点。
/* 给整个页面加一条横线 */ body:before{ content: ""; display: block; border-bottom: 3px solid black; position: fixed; top: 0; z-index: 9999; width: 100%; }
如果想给整个页面加上一条横线,可以使用上述代码,它使用了伪元素和content属性,同时设置了定位和z-index属性,让横线在页面中居中且固定不动。这样可以让整个页面看起来更加整洁,同时使整体风格更加统一。
使用下划线在CSS中加强效果已经非常普遍了,但加上横线同样可以发挥出自己的独特作用。上面的代码只是一个简单的示例,实际使用中可以根据需要进行调整,注重观感的同时不要影响到整个页面的布局。