伪元素在HTML5中的运用

在很久很久以前，我们就已经开始使用伪元素

在那时候的作用只有在高端浏览器饰演“清浮动”

.clearfix:after{content:”";display:block;height:0;line-height:0;visibility:hidden;clear:both;}

而且就只知道他可以“清浮动”

但现在，伪元素在我心里变得无敌了，就像《火影忍者》里的主角鸣人的影分身术，1个本体，整两分身出来，那就可以斗地主了。

 

知识普及

伪元素有四组，分别为：

:first-line

:first-letter

:before

:after

本文主要讲的是:before   :after，以下“伪元素”特指这两个伪元素

伪元素跟影分身术一样，在主角的前面（before）、后面（after）创建一个假的元素，所以你用chrome开发工具、Firebug是找不到它的。

伪元素的主要功能起装饰作用，提高可用性，在不支持的浏览器中不会提示出错。

IE6IE7不支持，IE8有少量不支持

 

语法

伪元素不设置content属性是不会生效的

:before与::before写法有什么不同，简单点说这两种语法没有什么区别，只是为了区别伪类（单冒号）和CSS3中的伪元素（双冒号）。

伪元素的层级关系

 

伪元素默认是行内元素，会继承父元素部分的属性

当对伪元素进行绝对定位时，层级排名是这样的，第一名after，第二名before，第三名元素本身。（暂时还没找到改变其层级关系的属性）

IE8文字前置，无法盖住元素文字

 

 

伪元素的实际应用

提高用户体验

例如一个在流程里比较重要的图片按钮，没有了这图片按钮下一部就无法进行下去的，那我们会更关注他们的体验。

图片加载前（或图片不加载），他是这样：

图片加载后，他变成这样：

 

在有影分身前，我们可能会这样写：

html:

开始游戏

css:

.bt_gm_play { 
display:block; 
width:155px; 
height:48px; 
margin:5px auto; 
position:relative; 
font:bold 22px/48px Microsoft YaHei, Tahoma; 
color:#f66200; 
text-align:center; }
.bt_gm_play s { 
display:block; 
width:155px; 
height:48px; 
position:absolute; 
left:0;
top:0; 
background:url(http://www.3366.com/img/portal/v2/middle/mid_intro_spt.png) 0 0; }
.bt_gm_play:hover s { 
background-position:0 -52px; 
cursor:pointer; }

有影分身后，我们就可以这样写：

html:

开始游戏

css:

.bt_gm_play_wei { 
display:block; 
width:155px; 
height:48px; 
margin:5px auto; 
position:relative; 
font:bold 22px/48px Microsoft YaHei, Tahoma; 
color:#f66200; 
text-align:center;  
*background:url(http://www.3366.com/img/portal/v2/middle/mid_intro_spt.png) 0 0;
*text-indent:-9999px
}
.bt_gm_play_wei:before { 
content:""; 
display:block; 
width:155px; 
height:48px; 
position:absolute; 
left:0; 
top:0; 
background:url(http://www.3366.com/img/portal/v2/middle/mid_intro_spt.png) 0 0; }
.bt_gm_play_wei:hover,  .bt_gm_play_wei:hover::before {background-position:0 -52px;cursor:pointer;}

虽然改变的只有是少了一个标签，但对有SEO、有严重洁癖的重构同学已经是很好的改善

PNG24图片叠加，渐进渐进增强

伪元素的加入，相当于让一个标签长出一双手，可以让页面变得更加生动