将内联元素的最后一行用作伪元素之后的宽度

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

这是最好的例子，我猜想：

作为小提琴： 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>

---

您需要将跨度设置为块元素。 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;
}

---

添加display:inline-block以跨度样式

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

结果：

链接地址: http://www.djcxy.com/p/88397.html

上一篇: Using the last line of an inline element as the width for :after pseudo element

下一篇: Can I change the height of an image in CSS :before/:after pseudo