Question

css 伪元素 ：before，：after 用法，在ie下有效果，在火狐，谷歌下失效，大神帮忙看看.

html:
<div class="artTitle"><a>this is a test</a></div>
css:
.artTitle
{
width:90%;
margin-top:10px;
height:45px;
font-size:20px;
padding:0 5%;
position:relative;
overflow:hidden;
}
.artTitle a::before,.artTitle a::after
{
content:" ";
position:absolute;
display:block;
width:0px;
height:45px;
background:#E3E3E3;
transition:width 0.2s linear;
-webkit-transition:width 0.2s linear;
z-index:-2;
}
.artTitle a::before
{
top:0;
left:0;
}
.artTitle a::after
{
top:0;
right:0;
}
.artTitle a:hover::before
{
width:50%;
}
.artTitle a:hover::after
{
width:50%;
}

效果为鼠标悬停div背景从两边向中间展现。

Answer 1

你说反了吧？你这段代码在FireFox、Chrome有效（我已经试过了），在IE（指IE6/7/8/9）中是无效的。原因在于transition是css3属性，IE不支持（IE10/11是支持的）。另外在IE7/8中要想使用before和after伪元素，必须声明 <!DOCTYPE>

Answer 2

把双冒号 都换成 单冒号就行了

追问

不是这个原因吧

追答

我在谷歌下试是好的