IE10及之后的伪元素

Question

我正在使用 after 伪元素在 h3 悬停上做一个非常简单的过渡。我读过 ::after 在 IE10 上工作（并且它在呈现它时工作），但不是悬停。

h3 {
  position:relative;
}
h3::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 2px;
  background: blue;
  left: 0;
  -ms-transition: all .5s;
  transition: all .5s;
}
h3:hover::after {
  width: 100%;
}
h3 a {
  text-decoration: none;
  position: relative;
  display: inline-block;
}

<!DOCTYPE html>
<h3>
<a href='#'>Hello</a>
</h3>

其他浏览器还行，不知道IE10怎么样...

Answer 1

尝试为 h3 添加空悬停选择器。 h3:hover{}

IE10及之后的伪元素

IE10 and after pseudoelements

html

css

hover

internet-explorer-10