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>