小编Luc*_*uca的帖子

在Internet Explorer上的hr标记中,伪元素无法正常工作

以下代码适用于除Internet Explorer之外的所有浏览器.在IE中,措辞似乎被压缩到1px height或被hr渐变覆盖.是什么导致了这个问题？

.hr-how {
  text-align: center;
  border: 0;
  height: 1px;
  margin-bottom: 40px;
  margin-top: 40px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.hr-how:after {
  content: "HOW TO USE IT";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 0.9em;
  padding: 0 0.6em;
  background: white;
}

Run Code Online (Sandbox Code Playgroud)