CSS 的::before 和 ::after 伪元素用法
关于css的伪元素用法
1､基础语法p:before { }
p:after {}
2､不过在css3 中为了区别 伪元素和伪类为伪元素。
p::before {}
p::after {}
3､伪元素和伪类元素有个共同的特性：{ content:' '; }
4､我们清除浮动的时候会遇到一些问题，也可以用伪类来处理。
// IE6、7下处理
.clearfix {
*overflow:hidden;
*zoom: 1;
}
// 正常浏览器下
.clearfix :after {
content: ' ';
display: table;
width: 0;
clear: both;
}
5､我们也可以用一些css3的一些特效，可以给一个元素增加两个容器的特效。
代码如下：
<p>帅帅哥</p>
<p>兜兜</p>
<p>ssg</p>
<style>
p:hover::before {
position: relative;
display: inline-block;
content: '\5B';
}
p:hover::after {
position: relative;
display: inline-block;
content: '\5D';
}
</style>