title: Add an image after link using CSS don't work in firefox and IE
body: <p>I want to add an icon (a small triangle) under a link using the CSS :after attribute, It works in Chrome but not in Firefox and IE. Here is the result in chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/Zcx3j.png" alt="enter image description here"></p>
  
  <p>but in IE and firefox here is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/3PMIe.png" alt="enter image description here"></p>
  
  <p>The CSS code:</p>
  
  <pre><code>li.ui-state-active &gt; 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;**
  }
  </code></pre>
  
  <p>also I tried this but with the same result (ok in just chrome):</p>
  
  <pre><code>li.ui-state-active &gt; 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;**
  }
  </code></pre>
  
  <p>Can you help me please figure out why?</p>