：internet explorer上的之前和:之后选择器

Question

我有一些css代码，它们使用:之前和:之后的选择器：

.caption-wrap .line-3:before,
.caption-wrap .line-3:after {
    content: " ";
    position: absolute;
    width: 50px;
    height: 5px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.caption-wrap .line-3:before {
    margin: 7px 0 0 -60px;
}
.caption-wrap .line-3:after {
    margin: 7px 0 0 10px;
}

幻灯片HTML标记：

<li>
    <img src="images/mountains.jpg" class="parallax-bg" alt="">
    <div class="overlay"></div>
    <div class="container hidden-xs">
        <div class="caption-wrap">
            <p class="line-1">we are</p>
            <h1 class="line-2 dashed-shadow">
                MINIMAL</h1>
                <h4 class="line-3">Design | Develpment | Success</h4>
                <p class="line-5">
                    <a href="#">codenpixel</a>
                    <a href="#">retrograde</a>
                </p>
                <p class="line-6">2014</p>
        </div>
    </div>
</li>

在Chrome上看起来是这样的：

​

和internet explorer：

​

在internet explorer开发工具中，所有这些css代码都是删除线，所以我想这被忽略了。有没有办法让这个css在internet explorer中工作？

网站link。

Answer 1

您不需要对伪元素进行绝对定位。您可以在伪元素上使用display:inline-block;实现所需的布局：

CSS：

.caption-wrap .line-3:before,
.caption-wrap .line-3:after {
    content: " ";
    display:inline-block;
    width: 50px;
    height: 5px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    margin: 7px 10px 0;
}

在IE 11上测试过，但这应该可以在 (IE8 +)上工作