伪元素不出现在IE 8中

Question

我有一个：应该正常工作的元素之后的伪元素。

我的风格如下：

.featured-video-link {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  position: relative; 
}
.featured-video-link:after {
  content: " ";
  display: block;
  position: absolute;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  -ms-transition: opacity .2s;
  transition: opacity .2s;
  z-index: 20;
  left: 50%;
  top: 50%;
  margin-left: -51px;
  margin-top: -51px;
  width: 102px;
  height: 101px;
  opacity: .5;
  background: url(img/play-large.png); 
}
.featured-video-link:hover:after {
  opacity: 1; 
}

我的HTML看起来像这样：

<div class="featured-video">
    <a href="http://www.google.com" class="featured-video-link">
        <img src="featured-video.jpg" class="featured-video-image" alt="Characteristics of a Design Engineer">
    </a>
    <div class="featured-video-title">Characteristics of a Design Engineer</div>
</div>

在IE 8开发人员工具中，height属性以某种方式被破坏成与background属性在同一行，而content和top属性也共享一行。如果我删除了top属性，则元素会出现，但显然位于错误的位置，并且没有理由将top属性放置到原来的位置。 z指数似乎也在考虑因素。