css - :pseudo元素动画在IE11中无法正常工作

我已经使用:pseudo element和HTML5 data-attri开发了一个工具提示。但是我的动画在IE11中无法正常工作。箭头图标首先在IE11中出现，工具提示框仅在几秒钟后出现。

请查看JSIBN Link。

我正在使用此CSS代码。

li:after{
    content:attr(data-tip);
    display:inline-block;
    position:absolute;
    left:5.3em;
    background: #2989d8;
    border-radius:5px;
    color:#ffffff;
    white-space: nowrap;
    padding:5px;
}
li:before,
li:after {
    opacity:0;
    transition:opacity ease-in .50s;
}

HTML代码是

<ul>
    <li class="arrow_box" data-tip="I am Advanced Tooltip">Home</li>
    <li data-tip="I am Tooltip">About US</li>
    <li data-tip="I am Tooltip">Products</li>
    <li data-tip="I am Tooltip">Contact Us</li>
    <li data-tip="I am Tooltip">Upcoming Feature</li>
    <li data-tip="I am Tooltip">New Events</li>
</ul>

最佳答案

演示-http://jsbin.com/pokabuwajo/1/

更改

li:hover:before {
  ..
}

至

li:before {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right:8px solid #2989d8;
  content:"";
  display: inline-block;
  position: absolute;
  margin-top:6px;
  left:4.2em;
  width:10px;
}