你的位置:首页 > 网页设计

[网页设计]CSS中的:after和:before的作用是什么


CSS中的:after和:before的作用是什么:
在当前的页面布局中:after和:before伪对象选择符的使用频率好像并不怎么高,因为低版本IE浏览器并不支持,不过也在清除浮动或者一切其他相关布局中有它们应用的身影。不过随着低版本浏览器使用率的下降,它们出现的频率应该会相应的增加。下面就简单介绍一下这两个伪对象选择符的用法,先看一段代码实例:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div:before{  content:"添加的内容"; } </style> </head> <body> <div>|div原来的内容</div> </body> </html>

以上代码可以在div元素的内部前端添加指定的内容。当然:before伪对象选择符是和content属性配合使用实现的。
语法结构:

E:before{ Rules }E::before{ Rules }

E表示用选择器匹配的元素,例如:

div:before.first:before#mytest:before

在语法中可以看到有两种语法形式,一种是before前面有一个":",一种是before前面有两个":",第一种是CSS2的写法,第二个是CSS3的写法。IE7和IE7以下的浏览器并不支持CSS2写法,IE8和IE8以下浏览器并不支持CSS3的写法。:before伪对象选择符一般和content属性配合使用为指定匹配元素内部的前端添加指定内容。:after伪对象选择符的使用方式和:before的用是一样的,不介绍了。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/507.html