> 웹 프론트엔드 > HTML 튜토리얼 > CSS中的:after和:before的作用是什么_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:41:18
원래의
1673명이 탐색했습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿