三个小实例，带你快速了解CSS伪元素

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战；

前言

css中的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，也可以理解为虚假的元素。
但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

正文

特性有哪些？

可以减少dom元素的定义，它们并不会改变文档内容，不可复制，仅仅是在css渲染层加入；
必须配合content属性一起使用，否则不会生效，且伪元素默认是inline，但可以用 display属性来调整；
结构无法审查，不方便调试；
js无法操作，增加、删除等；

究竟是 :: 还是 : ?

究其历史，在css2之前，伪类和伪元素都使用的是单冒号，比如:before和::before他们的作用是一样的。
在css3规范中引入了双冒号的概念，由此，单冒号（:）代表的伪类；双冒号（:）代表的是伪元素。

两者的不同之处总结：伪元素会产生新的对象，在DOM树中看不到，但是可以操作；伪类不会产生新的对象，仅仅是DOM中一个元素的不同的状态；

有哪些元素是伪元素？

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
selection	p::selection	选择用户选择的元素部分。

给大家附上W3C关于伪元素这一部分的是示例链接，W3C伪元素实例练习，感觉还是很不错的，简单易理解。感兴趣的同学可以去跟着尝试一番。

使用场景举例

清除浮动

    <div class="box">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    .box:after{
        content: '';
        display: block;
        clear: both;
        *zoom: 1;/* IE6-7不支持:after需触发hasLayout */
    }

实现效果：

模拟实现对话框

   <div class="margin">
        <h3>示例8：模拟微信对话框</h3>
        <div class="left">
             <p>hello，world！</p>
        </div>
        <div class="right">
            <p>明天又是充满希望的一天！</p>
        </div>
    </div>
   .left,.right{
        min-height: 40px;
        position: relative;
        display: table;
        text-align: center;
        border-radius: 7px;
        background-color: #50b5ee;
    }
    .right{      
        /*使左右的对话框分开*/
        top: 40px;
        left: 60px;
    }
    .left > p,.right > p{   
        /*使内容居中*/
        display: table-cell;
        vertical-align: middle;
        padding: 0 10px;
    }
    .left:before,.right:after{   
        /*用伪类写出小三角形*/
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        position: absolute;
        top: 11px;
    }
    /*左右两边小三角形定位*/
    .left:before{    
        border-right: 8px solid #50b5ee;
        left: -16px;
    }
    .right:after{    
        border-left: 8px solid #50b5ee;
        right: -16px;
    } *zoom: 1;/* IE6-7不支持:after需触发hasLayout */
    }

实例效果

3.放大点击区域

    <div class="play-cover">视图区域元素</div>
    .play-cover {
       position: relative;
       width: 130px;
       height: 50px;
       text-align: center;
       line-height: 50px;
       border: 1px solid #333;
     }

   .play-cover:before {
       content: "";
       position: absolute;
       top: -20px;
       left: -20px;
       bottom: -20px;
       right: -20px;
       outline: dashed;
   }

示例效果

小结

伪元素可以实现的不单单只有这些，深入学习一下，一定还会有意外收获的。感兴趣的小伙伴可以继续去学习了解一下。

结语

前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....