Search code examples
htmlcsshoverinternet-explorer-10

IE10 and after pseudoelements


I'm doing a very simple transition on a h3 hover with an after pseudoelement. I've read that ::after works on IE10 (and it does as it renders it), but not the hover.

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>

Other browsers works as a charm, I don't know what happens with IE10...


Solution

  • Try adding empty hover selector for h3. h3:hover {}