我不知道有没有小伙伴以前跟我一样，在一个元素内部想要添加一个小图标或者小东西的时候，
直接在HTML文档里自己加上<span>标签，或者其他的。亦或者用javascript在该元素中追加一个元素.
比如我们向下面这些div中添加b元素；
<div></div>
<div></div>
<div></div>
<div></div>
$(function){
$("div").append("<b>Hello</b>");}
结果：<div><b>Hello</b></div>
<div><b>Hello</b></div>
<div><b>Hello</b></div>
<div><b>Hello</b></div>
而 CSS伪类：before；
div:before{content:"●";width:5px;height:5px;left:169px;top:2px;}
注：content ：是一个属性，值为信息。（可以为符号，文字）；
实例：
html：
<div class="left">
<ul>
<li><a href="#">品牌简介</a></li>
<li><a href="#">品牌结构</a></li>
<li><a href="#">品牌定义</a></li>
<li><a href="#">品牌文化</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">大事记</a></li>
</ul>
</div>
CSS:
.left{width:175px;}
.left ul{padding-top:20px;border-right:1px dashed #333;}
.left ul li>a{position:relative;display:block;width:175px;text-align:center;font-size:16px;line-height:45px;}
.left ul li>a:hover:before{position:absolute;content:"●";width:5px;height:5px;left:169px;top:2px;}
.left ul li>a:hover{color:red;}
结果：
今天做项目用了CSS伪类选择器“before”，就来了解了解它怎么使用，又如何用？
原文：http://www.cnblogs.com/hcweb/p/7396070.html