辛星浅析伪类元素before和after

其中:before和:after的作用就是在指定的元素内容(不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素。

最基本的用法如下：

#xin:before{

content:"之前的内容";

color:red;

}

#xin:after{

content:"之后的内容";

color:blue;

}

上面的代码会在#xin元素之前之后插入相应的内容，插入的行内元素是作为#xin的子元素。

需要说明的是如果没有content元素，那么伪类元素将没有任何作用，但是可以指定content为空，我们在html源代码中是无法看到的，这就是为什么称之为为元素的理由，所以也就无法通过DOM对其进行操作。

伪类元素也会像其他子元素一样正常继承父元素的一些css属性，比如字体等。

如果父元素里面额子元素是浮动元素的话，我们一般需要在父元素闭合之前添加一个clear:both的元素用于清除浮动从而能使父元素被子元素内容撑起，但是这种方法会引入多余的无意义标签，并且有js操作的时候容易引发bug。

更好的操作方式就是利用css，我们可以使用一个.clearfix这样的类，只要在父容器上应用这个类即可清除浮动，其实现如下：

.clearfix:before,

.claerfix:after {

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

对于伪类，我们就解释到这里啦。