html---after和before

在html中有时候会需要自己做一些图标，可以不使用外部的资源，节省数据和资源。

before的参数有

    content:'';--------------------------图标中包含的文字
    width: 6px;------------------------图标宽度
    height: 6px;-----------------------图标高度
    border-radius: 4px;-------------图标转角的像素数，像素越大越圆滑，0是直角

    border: 1px solid #34afe7;---图标的像素，线型，颜色
    vertical-align: middle;---------图标的垂直位置

before和after的区别是图标放在指定元素的前面还是后面，例如：

.news-ul li:before{
    content:'';
    width: 6px;
    height: 6px;
    border-radius: 4px;
    border: 1px solid #34afe7;
    display: inline-block;
    vertical-align: middle;
    margin-right:5px;
}

下图中的蓝圈是通过这个代码实现的