使用伪元素before和after

　　HTML5增加了一系列的伪类选择器和伪元素选择器，增加的伪元素选择器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文档高亮部分，如鼠标选中文字)、::backdrop(不常用)。前面四者可能比较常用，会聚集到具体某一元素上，后面两个属于全局的元素。

　　这里谈一下::before和::after元素的使用。

　　1、添加元素内容：

<!DOCTYPE html>
<html>
    <head>
        <title>添加元素内容</title>
        <meta charset="utf-8" />
        <style>
           p{ padding: 20px;}
           p:before{content: "我是before添加的内容"; font-weight: bold;}
           p:after{content: "我是after添加的内容"; font-style: italic}
        </style>
    </head>
    <body>
    <p>我是元素里面的内容</p>
    </body>
</html>

　　在这里添加了元素内边距，判断before和after的位置是包含在content之中还是之外，结果如下：

我是元素里面的内容

　　添加一个伪元素十分的简单，必须设置content属性，该元素才能展示出来(包括为空"")。并且可以发现伪元素的文字，默认是不能按照文本选择的。

　　2、展示列表的hover特效(利用伪元素制作动画效果)：

<!DOCTYPE html>
<html>
    <head>
        <title>展示边框出现效果</title>
        <meta charset="utf-8" />
        <style>
            .hover>li{
                position: relative;
                float: left;
                width: 80px;
                list-style: none;
                text-align: center;
            }

            .hover>li:before{
                content: "";
                border-bottom: 2px solid #5ac;
                position: absolute;
                top: 20px;
                width: 0;
                left: 50%;
                transition: all linear .5s;
                padding-bottom: 20px;
            }
            .hover>li:hover:before{
                position: absolute;
                width: 100%;
                top: 20px;
                left: 0;
            }
        </style>
    </head>
    <body>
    <ul class="hover">
        <li>01组</li>
        <li>02组</li>
        <li>03组</li>
    </ul>
    </body>
</html>

　　上面的代码中，content，top及值，width，padding-bottom，transition都是必不可少的，只要有一点偏差就不能达到想要的效果。结果如下：

01组
02组
03组

　　3、由于这两个伪类属于元素的content部分，所以可以用来对元素进行边框外形的设置：

<!DOCTYPE html>
<html>
    <head>
        <title>设置边框样式</title>
        <meta charset="utf-8" />
        <style>
            .border{
                position: relative;
                width:150px;
                height: 36px;
                border:1px solid black;
                border-radius:5px;
                background: #eee;
                margin-left: 50px;
            }
            .border:before,.border:after{
                content: "";
                display: block;
                position: absolute;
                top:8px;
                width: 0;
                height: 0;
                border:6px solid transparent;
            }
            .border:before{
                left:-11px;
                border-right-color: #eee;
                z-index:1
            }
            .border:after {
                left: -12px;
                border-right-color: black;
                z-index: 0
            }
        </style>
    </head>
    <body>
    <div class="border"></div>
    </body>
</html>

　　通过before和after的定位，利用位置差值和颜色差异，将突出的小角展示出来。结果如下：

　　利用这两个伪元素可以很方便的为当前元素设置背景、图标、动画效果，而不用在添加额外的元素。

使用伪元素before和after

推荐阅读