:after和:before在页面布局中的应用

随着浏览器的更新迭代，越来越多的新技术在现在常用的浏览器中得到的支持，这也促进了这些属性的推广和使用。:after和:before就是其中之一，这两个伪元素针对目前的常用浏览器有良好的支持。

:after和:before兼容IE8及以上ie浏览器，以及其他浏览器。唯一要注意的就是，在ie8中只能用:after，而不支持::after。因此我们在平常使用的时候直接用单冒号的:after即可。由此可见在以后写页面时，我们可以放心大胆的用这两个伪元素了。那么这两个伪元素都有哪些特性及应用呢？

:after和:before的特性

:after或:before会在元素内容的后面或前面，元素结束符前或后面插入一个子元素。这个元素就叫做:after或:before。伪元素有一下特性：

1.要配合content使用，否则没有效果，content可以为空；

2.默认为行内元素，所以默认是不能设置宽高的，如果需要设置，需要像行内元素的处理方式一样；

3.和其他元素一样，也会继承父级的一些可以继承的属性；

4.在源码中找不到伪元素，所以不能通过DOM对他进行操作。

基本形式

selection:after{

content: "";/*可以向里面加内容，也可以为空*/

}

:after和:before用于清除浮动

我们经常会在一些cssreset里面看到一个clearfix，这既是一个通过伪元素实现的清除浮动的方法，代码如下：

.clearfix:after,

.clearfix:before{

  content:"";

  display:table;

  clear:both;

  height:0;

}

.clearfix{

  zoom:1;/*兼容ie7及以下的ie浏览器清除浮动*/

}

使用:after和:before在页面元素前后插入装饰性的元素

在页面设计中常常会在一些内容前面有icon、特殊符号、或者序号等。这些内容如果直接用元素标签实现的话，用的多了，html中会多出很多看似没有用的标签，并显得代码内容不够简洁清晰。在这些情况下，我们完全可以考虑用伪元素实现同样的效果。

添加特殊符号或者icon:

/* 添加特殊符号 */

.div1{

    text-align:center;

    margin-top:20px;

    font-size:20px;

}

.div1:before{

    content:"“";

    color:red;

}

.div1:after{

    content:"”";

    color:red;

}

添加序号：

/* 添加序号 */

.list{

  width:300px;

  margin:20px auto; 

  counter-reset: subsection;

}

.list h4:before{

  counter-increment: subsection;

  content:counter(subsection) ":"

}

使用:after和:before实现宽高等比的自适应布局

通过将元素中的子元素定位布局，然后再在元素上面添加伪元素，通过伪元素的padding-top值设置百分比，可以实现元素宽高的等比设置，而不需要通过js计算。核心css代码如下：

/*需要宽高等比设置的元素*/

.mama{

position: relative;

width: 200px;

background-color: #666;

}

.mama:before{

content: "";

display: block;/*必须设置这个才能实现*/

padding-top:50%;/*相当于设置的是高度是宽度的1/2*/

}

/*子元素*/

.son{

position: absolute;/*子元素使用绝对定位的目的是使子元素的高度不会撑起父级的高度*/

height: 100%;

width: 100%;

}

使用:after和:before使图片垂直居中

img元素作为行内块元素，他的水平居中可以跟文字一样处理，直接使用text-align:center；但是垂直怎么居中呢？其实我们还有一个垂直对齐方式的属性:vertical-align，可以实现垂直方向的元素对齐方式。当然，直接单独使用vertical-align:middle并不能使img垂直居中，它的垂直居中，其实是需要一个参照物的，而且这个参照物的高度还必须和父级一样高。很明显，我们可以使用伪元素实现这个参照物的功能。实际代码如下：

.box{

  height:300px;

  width:300px;

  background-color:#999;

  margin:0 auto;

  text-align:center;/*水平居中必须的代码*/

  font-size:0;/*清除display:inline-block产生的间隙*/

  letter-spacing:-1em;/*清除display:inline-block产生的间隙*/

}

.box img{

  vertical-align:middle;/*垂直居中必须的代码*/

}

.box:before{

  content:"";

  display:inline-block;

  width:0;/*减少伪元素宽度对布局的影响*/

  height:100%;/*垂直居中必须的代码*/

  vertical-align:middle;

  font-size:0;

}

总结：

伪元素:after和:before拥有良好浏览器兼容性以及广泛应用。正确合理的使用伪元素，不仅可以简化html代码，减少代码的嵌套层次，还可以在页面排版布局中起到重要作用

专业的网站建设公司，深正互联，如您有网站营销需求，请您关注我们，或者致电13828884598