伪元素:before和:after

伪元素是什么

顾名思义，他们不是真正的页面元素，没有对应的HTML元素，但是其表现的用法和真正的HTML元素一样，可对其进行css编写。

CSS 伪元素用于向某些选择器设置特殊效果。例如向某节点前面添加小icon或者字体等。

伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容。
若不设置content属性则伪元素不会起作用。

1、:before向某节点前面添加特效；:after向后面添加特效。
2、content属性值：
a、string。例如：句段等

<style type="text/css">
    .inp_box{
        position: relative;
        width: 200px;
        height: 60px;
    }
    .inp{
        display: block;
        margin-left: 60px;
    }
    .inp_name:before{
        content: '姓名：';
        color: red;
        position: absolute;
        top: 0;
        left: 0;
    }   
</style>

<div class="inp_box">
    <div class="inp_name">
        <input type="text" class="inp" />
    </div>
</div>  

b、attr(节点属性名)；将属性名链接起来，特殊的显示为目标节点的属性名。

<style type=""text/css">
    .boxFn{position: relative;}
    .boxFn:before{
        position: absolute;
        top: 0;
        right: -50px;
        content: attr(data-text);
    }
</style>

<div class="boxFn" data-text="data属性">
    <div class="box">
        box中    
    </div>
</div>

c、url(目标路径);可以为图片、音频等。

<style type=""text/css">
    .boxFn{position: relative;}
    .boxFn:before{
        position: absolute;
        top: 0;
        right: -50px;
        content: url('http://118.24.1.204/imgs/loading_ring.gif');
    }
</style>

<div class="boxFn" data-text="data属性">
    <div class="box">
        box中    
    </div>
</div>

d、counter(), 调用计数器，可以不使用列表元素既可以实现序号问题。

什么时候使用

1、清除浮动
清除浮动有很多的方法，现在用伪元素来清除浮动。这种做法有一个人好处，就是不占用DOM节点。

<style type="text/css">
    .box:after{
        clear: both;
        content: "\0020";
        display: block;
        overflow: hidden;
        background: yellow
    }
    .sub{
        float: left;
        width: 70px;
    }
</style>

<div class="box">
    <div class="sub">首页</div>
    <div class="sub">导航</div>
    <div class="sub">个人中心</div>
</div>

2、伪元素与counter()结合实现序号自动排列

<style type="text/css">
    .box{
        counter-reset: section;
    }   
    .sub:before{
        counter-increment: section;
        content: '列单' counter(section);
    }
</style>

<div class="box">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
</div>

实现效果如下图：

3、特效实现
a、复选框选中和非选

<style type="text/css">
    .check_box .check_1{height: 40px;}
    .check_box .inps{
    /*先将input元素隐藏，然后用伪元素模拟的icon代替原有的图形*/
        position: absolute;
        display: none;
    }
    .check_box label{
        position: relative;/*相对定位，方便其内容的伪元素进行定位*/
        padding-left: 30px;
        cursor: pointer;
        vertical-align: middle;
    }
    .check_box label:before{
    /*label添加:before伪元素，用于生成一个带边界的正方形，模拟复选框的轮廓*/
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        content: '';
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .check_box label:after{
        position: absolute;
        top: 2px;
        left: 7px;
        display: none;
        /*实现√图形：设置一个长方形，去掉其上边界和左边界，剩下的2个边界旋转45度就得到√形状*/
        content: '';
        width: 6px;
        height: 12px;
        transform: rotate(45deg);
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0; 
        box-sizing: border-box;
    }
    /*单击label，隐藏的checkbox为checked状态，这时设置checked状态下搭配label的:before伪元素背景和边界颜色*/
    .check_box .inps:checked + label:before{
    /*label与checkbox搭配时label使用样式*/
        animation-name: none;
        background: #3e97eb;
        border: #3e97eb;
    }
    .check_box .inps:checked + label:after{
        display: block;
    }
</style>

<div class="check_box">
    <div class="check_1">
        <input type="checkbox" id="inp_1" class="inps" />
        <label for="inp_1">产品1</label>
    </div>
    <div class="check_1">
        <input type="checkbox" id="inp_2" class="inps" />
        <label for="inp_2">产品2</label>
    </div>
    <div class="check_1">
        <input type="checkbox" id="inp_3" class="inps" />
        <label for="inp_3">产品3</label>
    </div>
    <div class="check_1">
        <input type="checkbox" id="inp_4" class="inps" />
        <label for="inp_4">产品4</label>
    </div>
    <div class="check_1">
        <input type="checkbox" id="inp_5" class="inps" />
        <label for="inp_5">产品4</label>
    </div>
</div>