为什么内联元素的行为如此？

Question

在我的项目上工作时，我发现如果内联元素开始新行，这种奇怪的行为（对我来说）。我会尽力解释。假设我们在 p 标记中包含一些内联文本-长度为150-250个符号。如果用 span / a 标记包裹的单词以新行开头（从第2行开始，依此类推），并且具有 before 伪类，并且具有以下样式：

&:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    background: green
    height: 3px

，则该 span / a 元素的宽度将变为段落的100％，高度也会增加。如果该词之前有一些文字甚至一个字母（以星号代替），那么一切都很好o_O。

为此我创建了一支笔。您可以在那里看到一个 .wrap 元素以限制宽度，以便 span 元素从第二行开始，您可以看到该行为。

https://codepen.io/antongrekov/pen/VweQqqp

它发生在最新的Chrome / Opera上，但是在Firefox上可以。 可能在带内联元素之前使用错误。我通过使用inline-block代替前伪元素来解决此问题。如果将 max-width：705.46px 值更改为750或其他值，则将span元素从其位置移开，并看到绿色背景应用于span元素的100％宽度，这就是代码原本是针对的。但是，如果跨度为星状，则行不通。

您觉得家伙如何？

您可以打开开发人员控制台，并在伪元素前选择span元素，以注意其宽度和高度有些奇怪。