CSS中的:after和:before的作用是什么_html/css

CSS中的:after和:before的作用是什么_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:41:18

Original

1643 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

div:before.first:before#mytest:before

Nach dem Login kopieren

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

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