在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了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>
效果便如上所示，方框包围的小三角就是。