スパンの末尾の空白は、後の擬似要素の絶対配置に影響を与えます

Question

私のサイトのコンポーネントをスタイリングするとき、spanの末尾に空白を追加すると、h2の中の絶対位置が奇妙な方法で絶対位置に影響します。私は境界として使用するafter要素です。境界線は、空白のないコンテンツの後ろに位置しますが、空白がある場合は内容の上に位置します。 You can see an example here。

これはなぜ異なってレンダリングされるのでしょうか？

HTML：

<h2> 
<span>A test</span> <!-- the border appears 'after' the content --> 
</h2> 
<h2> 
<span>A test </span> <!-- the border appears 'over' the content --> 
</h2> 

はCSS：

h2 { 
    position:relative; 
    height:1.625em/1; 
} 
h2 span { 
    font-size: 100%; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
    display: inline-block; 
    1.625em/1 'MuseoSlab300','Times New Roman',serif; 
} 
span:after { 
    content: ""; 
    border-bottom: 5px solid #7c61a0; 
    position: absolute; 
    bottom: 5px; 
    margin-left: 8px; 
    width: 100%; 
} 

Answer 1

私は、（なしの対末尾のスペースを持つ）これら2例の主な違いは、ブラウザは通常、コンテンツをラップするということだと思います必要に応じて、空白にします。したがって、最初のケース（末尾のスペースを使用）では、:after疑似要素が折り返すことができないため、ブラウザはそのスパンの幅を押し出すこと以外に選択肢がありません。 2番目のケースでは、ブラウザは元のスパンの幅を保持するキーとして擬似要素の宣言をposition:absoluteとし、擬似要素の前に空白を置き、ブラウザは擬似要素を次の行擬似要素の幅が100％ではなく10pxのような小さな値に設定されていても、この効果が見られます。

これはFirefoxとChromeの表示方法が異なるため、実際にどちらの規格が実際に動作しているのか、このケースが指定されているかはわかりません。