在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;
}
下图中的蓝圈是通过这个代码实现的