什么是:before和:after？ 该如何使用他们？
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
如下代码则代表分别在p标签前后加入字符“H”和字符“d”：
<style>
p:before{
content: "H"
}
p:after{
content: "d"
}
</style>
<p>ello Worl</p>
那么有的时候我们会在网页设计当中遇到大标题处加横线的效果，如下：
这个效果是可以用图片做出来的，但是图片比较占内存，我们最好是用css来实现，而此时CSS伪类before和after就发挥奇效了。
且看HTML代码：
<div class="container">
<h3 class="title">Welcome to <span>Snapshot</span></h3>
</div>
CSS代码：
.container{width: 1000px;margin: 10px auto;border: 1px solid red;}
h3.title {color: #F2AE11;font-size: 1.3em;margin-bottom: 3em;text-align: center;font-weight: 500;line-height: 1.1;}
h3.title span {display: block;font-size: 3em;color: #212121;position: relative; }
h3.title span:before, h3.title span:after {content: ''; position: absolute;top: 52%;background: #494949;width: 9%;height: 2px;}
h3.title span:before{left: 20%;}
h3.title span:after {right: 20%;}
最终效果：
总结：
1，这种方法比利用边框和背景图做出的效果更好更利于控制和修改
2，缺点是伪类在IE8上兼容有些问题
资源均来自第三方，谨慎下载，前往第三方网站下载
米微资源分享网 , 版权所有丨本站资源仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：用CSS伪类before和after做左右横线中间文字效果
转载请注明原文链接：用CSS伪类before和after做左右横线中间文字效果
