使用内联元素的最后一行作为 :after 伪元素的宽度

Question

我正面临一个我正在努力克服的问题。

我猜想用一个例子来最好地证明这一点：

小提琴： http://jsfiddle.net/wchv2hmn/3/

在浏览器中：

div {
    background-color: blue;
    text-align: center;
}
span {
    position: relative;
    background-color: green;
    
}
span:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    width: 100%;
    background-color: red;
}

<div>
    <span>
        htejuteujetjtjehrehreheherhrehrehre sghosgjosjoskoskfosjofshohofshofusofhrehrhrehehhrehrherheheuorfos
    </span>
</div>

我需要:after 伪元素来占用<span> 中最后一行文本的宽度，而不是第一行。

将 inline-block 添加到 span，导致文本仅显示为块级元素，如 chrome 和 Firefox 39 中所示：

div {
    background-color: blue;
    text-align: center;
}
span {
    position: relative;
    background-color: green;
    display:inline-block;
    
}
span:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    width: 100%;
    background-color: red;
}

<div>
    <span>
        htejuteujetjthehtehtehethetje sghosgjosjoskoskfosjofshohofshofusethehetthehehterfos
    </span>
</div>

就好像<span>s min-width 设置为当所有文本都适合一行时<span> 将占据的长度。所以当窗口缩小时，文本分割成两行或更多行，宽度不能缩小到小于它的假设min-width...

有人有什么想法吗？最好不必更改 DOM，尽管如果绝对必要也可以这样做。

Answer 1

将display:inline-block 添加到跨度样式

 span {
     position: relative;
     background-color: green;
     display:inline-block;
 }

结果：

Answer 2

您需要将跨度设置为块元素。 html

<div>
<span>
    htejuteujetjtje  sghosgjosjoskoskfosjofshohofshofusofuorfos
</span>
</div>

CSS

div {
background-color: blue; 
}
span {
position: relative;
background-color: green;
}

span{display:block;}

span:after {
content: '';
display: block;
height: 10px;
width: 100%;
background-color: red;
position: absolute;
}