CSS的伪类 :before 和 :after
2012-07-20 12:57
330 查看
今天在尝试用CSS3做android robot的时候 (http://jsfiddle.net/crabyan/bJVHU/4/)
发现了参考例子里面的一个CSS3伪类 :before :after
最近对于新知识确实落后了,必须恶补
举例:
实际效果:
测一测
实际效果如上,会在元素内的前端加上一个元素,以前这么做需要依赖JS,而现在CSS3就可以搞定。
:after 也是同理。
发现了参考例子里面的一个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 也是同理。
相关文章推荐
- CSS :before :after 伪类选择器
- CSS伪类:before 和 :after
- css中伪类 :before和:after
- [DIV/CSS] CSS 属性 :before && :after的用法,伪类和伪元素的区别
- CSS 属性 :before && :after的用法,伪类和伪元素的区别
- css伪类 :before和:after的使用
- css之伪类选择器:before :after(::before ::after)
- css的伪类:before 和 :after 的强大之处
- 用css伪类:before,:after前后插入线
- CSS伪类对象before和after的实例
- css伪类 :before和 :after的使用详解 以及实现的一些效果
- CSS基础-03 伪类,伪元素,before和after使用案例
- 通过js修改css伪类after,before等样式
- CSS伪类:before在元素之前 :after 在元素之后实例讲解
- 【转载】CSS 伪类-:before和:after
- CSS伪类(pseudo class)简明介绍之:before和:after
- CSS伪类(pseudo class)简明介绍之:before和:after
- CSS伪类before,after制作左右横线中间文字效果
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
- CSS伪类对象before和after的用法实例详解