css after支持ie8,CSS使用伪元素:before,:after生成内容及IE兼容问题

1. CSS伪元素(pseudo-element)和伪类(pseudo-class)

CSS2.1中的伪类有：

:link  :visited

:hover​ :focus :acvtive

:first-child :lang()

CSS2.1中的伪元素有：

::first-line   ::first-letter

::before   ::after

我们注意到伪元素使用了双冒号语法，这是在CSS2.1中引用的，而目前浏览器没有强制要求在伪元素上使用双冒号语法，一个冒号也是可以的。​

2.CSS生成内容

通过伪元素::before和::after以及它们的属性content实现内容的插入。

content属性支持如下插入内容​：

(摘自W3school)

​3.IE的兼容问题

​

在使用IE开发者工具模拟IE8环境时发现，IE8及以下不支持双冒号语法，不支持:after伪元素，但是支持单冒号语法。其二IE8及以下不支持在content属性中直接使用url指定图片内容。

解决办法：使用单冒号语法，图片内容使用如下方式设置：

a：before{display:block;width:100px;height:100px;content:'';

background:url('图片路径') 0 0

no-repeat;}​

​