CSS的伪类 :before 和 :after

今天在尝试用CSS3做android robot的时候 (http://jsfiddle.net/crabyan/bJVHU/4/) 

发现了参考例子里面的一个CSS3伪类 :before :after

最近对于新知识确实落后了，必须恶补

 

:before 伪元素在元素之前添加内容。
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

 

举例：

<style>
#test_1:before {content:url(http://static.cnblogs.com/images/adminlogo.gif)}
</style>

<p id="test_1" style='border:1px solid #ddd;'>测一测</p>

 

实际效果：

 

测一测

 

实际效果如上，会在元素内的前端加上一个元素，以前这么做需要依赖JS，而现在CSS3就可以搞定。

:after 也是同理。