使用CSS：Before伪元素设置块级分割线

今天学习了css中：before选择器的用法。原来该选择器的作用是往元素的内容之前插入新内容，同时可以给内容设置样式，after也是同样的用法，而这两个伪元素的功用还仅于此，在这里，我只是介绍利用该伪元素的一个简单用法——实现文章列表间的分割线效果。更多用法大家可以参考这篇文章：详细可参考这篇文章：你所不知的 CSS ::before 和 ::after 伪元素用法，很多实用功能的说，不过需要注意的事，这篇文章中说道的伪类的说法其实是不准备的，：before和：after应该是伪元素的一种，而不属于伪类，文章后面的评论也指出了文章中的一些纰漏之处，大家可以仔细看下，以防混淆。

好了，切入正题——如何利用before或after伪元素来实现如下图所示的文章列表分割线的效果？



很简单，为文章列表项容器设置如下样式即可：

.article-box {
padding-top: 15px;
padding-bottom: 15px;
position: relative;
}
.article-box:after {
content: " ";
position: absolute;
height: 5px;
right: 0;
bottom: 0;
left:0;
background-color: #E9E9E9;
border: 1rpx solid lightgray;
}

这样，在文章列表块顶部便会出现一条灰色分割线，其中，content属性是必须设置的，否则伪元素会不起作用，当不需要伪元素中填充内容时，可以直接设置content为空，即 content: “”，但是一定要保证content属性存在。当然对于第一篇文章，我们并不需要这条线，因此，可以设置如下属性隐藏通过::before插入的内容：

.article-box:first-child:before {
display: none;
}

当然，对于分割线直接利用上边框或下边框也可以实现，使用before或after伪元素的好处在于可以更加简单的设置高度，颜色，线框等各不一样的分割线，所以我更喜欢用这种方法。

最后需要注意的是：伪元素不会出现在DOM中，且在某些开发工具如火狐中使用伪元素显示内容，会造成难以维护和调试缓慢。所以，尽量不要使用伪元素生成内容，以保证您的网页的可用性和可访问性。