使用CSS链接后添加图像在Firefox和IE中不起作用

Question

我想使用CSS在链接下添加一个图标（一个小三角形）：after属性，它适用于Chrome但不适用于Firefox和IE。以下是chrome中的结果：

但在IE和Firefox中的结果是：

CSS代码：

li.ui-state-active > a:after {
width: 22px;
height: 19px;
position: absolute;
display:block !important;
left: 50%;
margin-left: -11px;
bottom: -19px;
z-index: 2;
content: '';
**background-image: url(#{resource['img:css/arrow-menu-onglet.png']}) no-repeat !important;**
}

我也尝试了这个但是结果相同（好吧只是chrome）：

li.ui-state-active > a:after {
width: 22px;
height: 19px;
position: absolute;
display:block !important;
left: 50%;
margin-left: -11px;
bottom: -19px;
z-index: 2;
**content: url(#{resource['img:css/arrow-menu-onglet.png']}) no-repeat !important;**
}

你能帮我解释一下原因吗？

Answer 1

无需图片：

/* tabbed nav */

nav ul {
  list-style: none;
}
nav li {
  display: inline-block;
}
nav li a {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background: #fff;
  margin-right: 4px;
  margin-bottom: 7px;
}
nav li a.state-active:after,
nav li a.state-active:before {
  content: " ";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
}
nav li a.state-active:after {
  bottom: -15px;
  border-top: 15px solid #fff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
nav li a.state-active:before {
  bottom: -23px;
  border-top: 23px solid #DBD5C7;
  border-left: 23px solid transparent;
  border-right: 23px solid transparent;
}
/* ----- */

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 20px;
  background: #DBD5C7;
}
div {
  background: #fff;
  height: 100px;
}

<nav>
  <ul>
    <li><a href="" class="state-active">LINK 1</a>
    </li>
    <li><a href="">LINK 2</a>
    </li>
    <li><a href="">LINK 3</a>
    </li>
  </ul>
</nav>
<div></div>