Rumah >hujung hadapan web >html tutorial >CSS中的:after和:before的作用是什么_html/css_WEB-ITnose
CSS中的:after和:before的作用是什么_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:41:181680semak imbas
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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS如何实现网易的盖楼效果_html/css_WEB-ITnoseArtikel seterusnya：html学习-_html/css_WEB-ITnose