css - :pseudo element animation doesn't work properly in 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;
}