Question

我有一个绝对定位的::before伪元素，我试图在CSS上面添加一个箭头。特别是这个箭头出现在悬停中。

在IE以外的所有浏览器中，这样可以正常工作。在IE中，伪元素出现在悬停上，但是＆＃34;在＆＃34;后面。按钮的父级div。这使得它看起来好像箭头根本没有显示。

z-index属性似乎没有效果。我在这里设置了一个jsfiddle：

我感谢任何建议。

Answer 1

在IE中，您必须声明：hover以及：hover：before。

button:hover { } /* IE needs this to trigger the :hover:before */
button:hover:before {
  content: " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid blue;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

button {
  position: relative;
    margin: 10px;
    border-radius: 25px;
    display: inline-block;
    padding: 8px 36px;
    background: gray;
}

<div class="wrapper">
  <button>
    Button
  </button>
</div>

Answer 2

对于遇到类似问题的任何人：

使用实际的button元素导致了该问题。切换到div解决了问题。这个怪癖似乎仅限于IE。

如何显示：在IE

2 个答案: