常见的:Before和:After伪元素

目前css3中伪元素共有5个 分别是:first-line, :first-letter, :selection, :before 和 :after，前面三个伪元素我目前没有看到过，可能是我不是做前端的，没有怎么注意。:before :after在实际去开发中遇到的挺多的。本文主要讲一下:before :after两个伪元素
什么是伪元素
伪元素，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用
伪元素发展过程
早在CSS1里就已经有了伪元素的概念,:before 和 :after 这两个伪元素，是在CSS2.1里新出现的,起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before 和 ::after

不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号
:before 和 :after 举例与使用方法

<style type="text/css">
body{
                font-family: cursive;
                font-size: 14px;
            }
            .left{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .left:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left: -30px;
                top: 10px;
                border: 15px solid;
                border-color: transparent green transparent transparent;
            }
            .left:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left: -27px;
                top: 10px;
                border: 15px solid;
                border-color: transparent #fff transparent transparent;
            }

            .right{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .right:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                right: -30px;
                top: 10px;
                border: 15px solid;
                border-color: transparent transparent transparent green;
            }
            .right:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                right: -27px;
                top: 10px;
                border: 15px solid;
                border-color: transparent transparent transparent #fff;
            }

            .up{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .up:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: -30px;
                border: 15px solid;
                border-color: transparent transparent green transparent ;
            }
            .up:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: -27px;
                border: 15px solid;
                border-color: transparent transparent #fff transparent;
            }

            .down{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .down:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: 50px;
                border: 15px solid;
                border-color: green transparent transparent transparent ;
            }
            .down:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: 48px;
                border: 15px solid;
                border-color: #fff transparent transparent transparent ;
            }

            .line{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }

            .line:before{
                border-bottom: 1px solid #3ca156;
                -webkit-transform: skewY(30deg);
                transform: skewY(30deg);
                content: '';
                width: 92px;
                position: absolute;
                left: 30px;
                top: 50%;
            }

            .line:after{
                border-bottom: 1px solid #3ca156;
                -webkit-transform: skewY(-30deg);
                transform: skewY(-30deg);
                content: '';
                width: 92px;
                position: absolute;
                left: 30px;
                top: 50%;
            }

            .fork{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
            }
            .fork:before{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .fork:after{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent green;
                position: absolute;
                top: -0px;
                right: -60px;
            }

            .fork-left{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-left:before{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .fork-right{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }

            .fork-right:after{
                content: "";
                border: 30px solid;
                border-color: transparent #fff transparent transparent;
                position: absolute;
                top: 0px;
                right: 0;
            }

            .fork-up{
                color: #fff;
                width:60px;
                height: 150px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 150px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-up:after{
                content: "";
                border: 30px solid;
                border-color: transparent  transparent #fff transparent;
                position: absolute;
                top: 90px;
                right: 0;
            }

            .fork-down{
                color: #fff;
                width:60px;
                height: 150px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 150px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-down:before{
                content: "";
                border: 30px solid;
                border-color: #fff transparent  transparent  transparent;
                position: absolute;
                top: 0;
                right: 0;
            }
</style>
<div class='left' style="float:left">left</div>
<div class='right' style="float:left">right</div>
<div class='up' style="float:left">up</div>
<div class='down' style="float:left">down</div>
<div class='line' style="float:left">line</div>
<div class='fork'style="float:left">fork</div>
<div class='fork-left'>fork-left</div>
<div class='fork-right'>fork-right</div>
<div class='fork-up'>fork-up</div>
<div class='fork-down'>fork-down</div>

QQ交流群：136351212
查看原文：http://www.phpsong.com/2460.html