尽量地使用伪元素

伪元素是一个好东西，可是不少人都没怎么用，由于他们以为伪元素太诡异了。其实使用伪元素有不少好处，最大的好处是它能够简化页面的html标签，同时用起来也很方便，善于使用伪元素可让你的页面更加地简洁优雅。

1. 伪元素使用场景

伪元素通常是用于画图，特别是那种可有可无的分隔线、点之类的小元素，以下图的绿框所示：

上面第一张图的分隔线，就是用before画的。只须要给div套一个类，这个类写一个before，那么相应的div就会带上分隔线，而不用每加一个内容，就得手动添加一个span来画那个分隔线。

2. 什么是伪元素

伪元素是一个元素的子元素，而且它是inline行内元素。给一个标签加上before和after，用浏览器检查：

能够看到before成为了这个标签的第一个子元素，而after成为了它的最后一个子元素。

这样其实至关于，本身写了两个span：

可是它跟span为不太同样，由于伪元素是伪的，伪的意思就是说，你没法用js获取到这个伪元素，或者增、删、改一个伪元素，因此伪元素的优势就体如今这里了——你能够用伪元素制造视觉上的效果，可是不会增长JS查DOM的负担，它对JS是透明的。因此即便你给页面添加了不少伪元素，也不会影响查DOM的效率。同时，它不是一个实际的html标签，能够加快浏览器加载html文件，对SEO也是有帮助的。

3. 使用伪元素的案例

1.画分割线

像下面的这个or：

它的html结构是：

 

 

 

 

 

XHTML

 

1

<p>or</p>

就是一个p标签。左右两条线用before和after画出来：

画分隔线

 

 

 

 

 

CSS

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.or{     text-align: center; } .or:after, .or:before{     content: "";     position: absolute; /* 注意把一个元素absolute定位后会强制把它 */     top: 12px;     height: 1px;     background-color: #ccc;     width: 200px } .or:after{     right: 0; } .or:before{     left: 0; }

注意上面代码第7行，虽然before和after是一个行内元素，可是absolute定位后会把它强制display:block，即便你再dislay:table-cell之类的也无论用。

假设还有其它地方须要用到这种线，那么我只要给那个标签套一个or的类就能够了，假设页面有n个相同的地方须要用到，那么页面就减小了2n个标签。一个页面会有不少视觉辅助性元素，这些元素均可以用伪元素画。

2. 清除浮动

“大大有名”的清除浮动clearfix大法就是借助伪元素。何谓清除浮动——一个父元素的全部子元素若是都是浮动的，那么这个父元素是没有高度的，（1）若是这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方（2）若是相邻的元素是一个块级元素，那么设置这个块级元素的margin-top将会以这个父元素的起始位置做为起点。这相应地体现了浮动的两个特性：

1）浮动的元素不像absolute定位那样，它并无脱离正常的文档流，仍然占据正常文档流的空间。而这个空间正是正常文档流的background的border，反过来讲，其它元素将会围绕着浮动的元素排列，浮动的元素就会占据着它们的背景和border，以下：

第一段落围绕着图片排列

图片的float属性也影响了第二段落，也就是说float会占据天然文本流相应位置元素的背景和边框，即便和float的元素不在同一行

2）浮动的元素虽然还在父容器的区域内排列，但它不会撑起父容器的高度，父容器的高度跟没有子元素同样都是0px。为何要这样设计呢，假设浮动撑起了父容器的高度了，那么就不会有上面（1）点的效果了，两段文字环绕着一张图片环绕，要知道浮动的出现是为了解决图片环绕文字的问题。（关于浮动更详细的讨论见我这篇文章：从三栏自适应宽度布局到css布局的讨论）

因此结合这两点，就能够解决高度塌陷的问题。目标是要把父容器的高度撑起来，考虑到浮动了的元素并无脱离正常文档流，而其它元素会围绕着它环绕，因此清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把全部浮动的元素顶起来，而这把尺子就是一个设置了clear的块级元素。由于块级元素会换行，而且设置它两边不能跟着浮动的元素，因此它就跑到浮动元素的下面去，就像一把尺子把浮动元素的内容给顶起来了。而这个能够用一个after实现，由于after就是最后一个子元素：

clearfix

 

 

 

 

 

CSS

 

1 2 3 4 5

.clearfix:after{     content: "";     display: table;     clear:both; }

行内元素是inline的，因此要改变它的display，不少人都忽略了before/after是一个行内元素。

3. 巧用伪元素作一些特殊效果

用before最大的好处是能够用CSS控制，所以能够经过动态地添加和删除一个类，或者是结合:hover :active等伪类作一些效果。

1）例以下面的这种输入框，有两种状态：编辑和查看，若是是查看，则不可点不可输入，直观的办法是把一个个input和select禁掉，可是这样太麻烦了。一个很简单的办法就是画一个after把它盖上去就好了

以下：

盖住编辑区域

 

 

 

 

 

CSS

 

1 2 3 4 5 6 7 8

form:after{     content: "";     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%; }

2）还能够用伪元素展现文字，就是设置它的content，不过这种通常用得比较少，用得比较多的是图标字体。能够用它的content作一些有趣的事情，例以下面的计数，没有用到一行js代码，读者能够点击试试：

苹果香蕉梨柿子桃子

您选择了种水果

这里使用了CSS的计数器，结合伪元素，代码以下：

 

 

 

 

 

XHTML

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style> .choose{   counter-reset: fruit; } .choose input:checked{     counter-increment: fruit; } .count:before{     content: counter(fruit); } </style> <div class="choose">     <label><input type="checkbox">苹果</label>     <label><input type="checkbox">香蕉</label> </div>   <p>您选择了<span class="count"></span>种水果</p>

3）还有人作了些小游戏，例以下面这个ASCII编码的游戏，一个ASCII编码由8位组成，经过打开不一样的位，就会变成不一样的字符，读者能够试试：

这个主要是结合::checked和counter，用before/after纯CSS实现的，这种纯粹是炫技。还有其它的一些小游戏，详见：Pure CSS Games with Counter-Increment

 

须要注意的是img/input等单标签是没有before/after伪元素的，由于它们自己是不能够有子元素，若是你给img添加一个before，那么会被浏览器忽略。

 

扩展阅读：

1. Effective前端1：能使用html/css解决的问题就不要使用JS
2. Effective前端2：优化html标签
3. Effective前端3：用CSS画一个三角形
4. Effective前端4：尽量地使用伪元素
5. Effective前端5：减小前端代码耦合