在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了css3后很多变得方便了，比如要在li列表的每行文字的前面加个小三角，可以这么写：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>ces</title>
<style>
a{ text-decoration: none; color: #666; }
ul{ list-style: none; }
ul li{ margin-left: 10px; position: relative; }
li::before{
content: "";
border: solid 4px;
border-color: transparent transparent transparent #666;
width: 0px;
height: 0px;
position: absolute;
left: -6px;
top: 6px;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
效果便如上所示，方框包围的小三角就是。