Html Firefox导致伪元素之前的'display:inline'行为不正确

Firefox引发的问题在Chrome、Safari或IE11中没有出现。将

display:inline

属性与

：：before

伪元素添加到标题元素时，会导致绝对定位伪元素的

底部：0

不会显示在元素的底部，而是显示在第一行的底部

这只显示跨越多行的标题，有人知道Firefox的解决方法吗？所有不同的

显示

属性值都不会使伪元素与其他浏览器显示相同

h1{
位置：相对位置；
显示：内联；
}
h1：：之后{
位置：绝对位置；
底部：0；
左：0；
宽度：0；
高度：5px；
内容：“；
背景色：红色；
转换：所有.2易入易出；
}
h1：悬停：：之后{
宽度：100%；
}

我的标题包含多行

当涉及到多行上的

内联

元素时，伪元素很棘手。在这种情况下，你可以考虑背景来轻松地做你想做的事情：

h1{
位置：相对位置；
显示：内联；
背景：线性渐变（红色，红色）左下角无重复；
背景尺寸：0.5px；
转换：所有.2易入易出；
}
h1：悬停{
背景尺寸：100%5px；
}
.行{
宽度：200px；
}

我的标题包含多行

当涉及到多行上的

内联

元素时，伪元素很棘手。在这种情况下，你可以考虑背景来轻松地做你想做的事情：

h1{
位置：相对位置；
显示：内联；
背景：线性渐变（红色，红色）左下角无重复；
背景尺寸：0.5px；
转换：所有.2易入易出；
}
h1：悬停{
背景尺寸：100%5px；
}
.行{
宽度：200px；
}

我的标题包含多行

是否要在带有过渡的多行文本下划线？是的，Firefox中的代码笔应该与Chrome中的代码笔外观完全相同，但由于某些原因，它没有。不确定这是否是Firefox bug？是否要在带有转换的多行文本下划线？是的，Firefox中的代码笔应该与Chrome中的代码笔完全相同，但由于某些原因它没有。不确定这是否是Firefox的bug？谢谢你的帮助，但我并不希望所有的代码都有相同的效果，下划线应仅位于最后一行，宽度应与该行的最后一个单词相同。@在本例中，TomHartley只需使用

ìnline block

而不是

inline

，谢谢您的帮助，但我并不希望所有行都有相同的效果，下划线应仅位于最后一行，宽度应与该行的最后一个单词相同。@在这种情况下，TomHartley只需使用

ìnline block

而不是

inline