CSS在一个元素上的两个转换(:hover和:hover:after)不起作用

Question

我最近尝试应用两个CSS转换-两个一个元素，其中一个到元素本身，另一个到它的：after。到目前为止，唯一可用的动画/过渡是：after one。这是我的代码：

#menu {
height: 40px;
list-style-type: none;
margin: 0px;
margin-left: 660px;
padding-left: 0px;
position: absolute;
top: 0px;
width: 600px;
}
#menu li {
color: black;
display: inline;
font-size: 25px;
height: 40px;
line-height: 40px;
position: absolute;
text-align: center;
transition: color .2s; /*not working*/
width: 150px;
}
#menu li:hover {
color: white;
}
#menu li:after {
background-color: black;
content: "";
display: block;
height: 0px;
margin-top: -40px;
position: absolute;
transition: height .2s; /*working*/
width: 150px;
}
#menu li:hover:after {
height: 40px;
}

我的问题是元素本身的转换不起作用。这个问题有什么解决办法吗？

感谢您的回答！

Answer 1

根据Tushar的评论，它正在工作，但:after伪元素覆盖了<li>（即:after呈现在<li>之上）。

从伪元素中删除position:absolute可以修复这个问题——请参阅jsfiddle。

Answer 2

这可能很愚蠢，但请尝试将-moz-、-webkit-或-o添加到css 中