Firefox 导致伪元素之前的“显示：内联”行为不正确

Question

Firefox 导致的问题未出现在 Chrome、Safari 或 IE11 中。当将display: inline 属性与::before 伪元素一起添加到标题元素时，它会导致绝对定位伪元素的bottom: 0 不会出现在元素的底部，而是出现在第一行的底部.

这仅显示在跨多行的标题上，有人知道 Firefox 的解决方法吗？所有不同的display 属性值不会使伪元素与其他浏览器看起来相同。

h1 {
  position: relative;
  display: inline;
}

h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 5px;
  content: "";
  background-color: red;
  transition: all .2s ease-in-out;
}

h1:hover::after {
  width: 100%;
}

<div style="width:200px;">
<h1>My Heading That Covers Multiple Lines</h1>
</div>

代码笔：https://codepen.io/anon/pen/bXEjGg

Answer 1

当涉及到多行上的inline 元素时，伪元素很棘手。在这种情况下，您可以考虑背景以轻松做您想做的事情：

h1 {
  position: relative;
  display: inline;
  background: linear-gradient(red, red) bottom left no-repeat;
  background-size: 0 5px;
  transition: all .2s ease-in-out;
}

h1:hover {
  background-size: 100% 5px;
}

.row {
  width: 200px;
}

<div class="row">
  <h1>My Heading That Covers Multiple Lines</h1>
</div>

相关：How can I achieve a CSS text loading animation over multiple lines?

---

如果你想对所有行都产生相同的效果，可以考虑box-decoration-break：

h1 {
  position: relative;
  display: inline;
  background: linear-gradient(red, red) bottom left no-repeat;
  background-size: 0 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
  transition: all .2s ease-in-out;
}

h1:hover {
  background-size: 100% 5px;
}

.row {
  width: 200px;
}

<div class="row">
  <h1>My Heading That Covers Multiple Lines</h1>
</div>