：伪元素动画在IE11中无法正常工作

Question

我使用: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>

Answer 1

演示 - 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;
}