CSS3伪元素Before和After应用介绍

伪元素在CSS2.1的规范中就已经定义清楚了,到CSS3后,before和after因其特殊的用途,在结合强大的CSS3新特性一起使用时,开始大放异彩,关键是可以利用它们实现很多之前需要JS支持的效果。如果英文不错,CSS2.1规范中伪类和伪元素的内容可以参考原文:http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

基础知识

在CSS2.1中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。

所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。

伪类:伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。

伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang
伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们,否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容)。

伪元素有::first-line,:first-letter,:before,:after

类,伪类,伪元素之间的关系可以总结为:

1)类选择器可以看着属性选择器在HTML应用中的一种快捷方式,从逻辑和功能上理解有传统类的含义,其被HTML元素预定义的属性class引用,所以叫着类选择器。
2)伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
3)伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

记住哦,伪类和伪元素都不出现在源文件和文档树中,所以称之为 “伪”

案例应用

::before -- CSS ::before 伪元素,定义在一个元素的内容之前插入content属性定义的内容与样式

::after-- CSS ::after 伪元素,定义在一个元素的内容之后插入content属性定义的内容与样式

例子1

伪元素案例

HTML代码如下:<h1>伪类用法例子 mxria  </h1>

CSS代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
h 1: before {
 
     display : block ;
 
  width : 100px ;
 
  height : 100px ;
 
  background-color : #0066CC ;
 
     text-align : center ;
 
     white-space : pre ;
 
     content : "" ;
 
}
 
h 1: after {
 
     display : block ;
 
  width : 150px ;
 
  height : 100px ;
 
  color : #FF33CC ;
 
  font-size : 13px ;
 
  background-color : #6600FF ;
 
     text-align : center ;
 
     white-space : pre ;
 
     content : "after伪元素" ;
 
}

再看一个例子:

伪元素设置div

代码如下:

<div class="pseudo">伪元素是一个值得大家发挥创意想象力的应用点</div><div class="pseudo">伪元素before/after可以实现各种创意效果</div>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.pseudo:before{
 
width : 225px ;
 
height : 15px ;
 
display : block ; float : left ;
 
border : 1px solid #FF3300 ;
 
border-radius: 30% ;
 
content : "" ;}
 
.pseudo:after{
 
width : 225px ;
 
height : 15px ;
 
display : block ;
 
float : right ;
 
border : 1px solid #FF3300 ;
 
border-radius: 50% ;
 
content : "" ;}
 
div { width : 400px ;}

上述例子DEMO

更多利用before after实现多种CSS特效的应用案例可以参考如下内容:

css3应用:QQ衰表情

神奇的CSS3滤镜组合应用效果教程

 

 

http://www.mxria.com/css3/50/09_selector_221614.htm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值