如何让span::after伪元素覆盖换行后的完整span内容？

我编写了如下CSS样式，实现鼠标悬停时半透明显示隐藏内容的效果：

.spoiler {
    pointer-events: auto;
    position: relative;
}

.spoiler::after {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgb(20, 20, 20);
    transition: opacity 250ms;
}

.spoiler:hover::after {
    opacity: 0.25;
}

当span内文本未换行时，样式可以正常工作；但文本换行后，::after伪元素无法覆盖整个span区域。

对应的HTML代码如下：

- Reduced stage requirement for <span class="spoiler">light</span>. <br>
- <span class="spoiler">Light upgrade 3 is now much stronger: starting effect is 100ms, max level is 20, cost scaling is 2</span>.

请问如何让::after伪元素覆盖整个span元素？

问题根源在于<span>是行内元素，绝对定位的伪元素会基于行内元素的单行行框计算尺寸，无法适配多行内容。只需给.spoiler添加display: inline-block;（或根据布局需求选择display: block;），将元素转换为行内块级/块级元素，伪元素就能正确继承元素的完整尺寸，覆盖所有行的内容。

修改后的CSS代码：

.spoiler {
    pointer-events: auto;
    position: relative;
    display: inline-block; /* 关键修改 */
}

.spoiler::after {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgb(20, 20, 20);
    transition: opacity 250ms;
}

.spoiler:hover::after {
    opacity: 0.25;
}

原理说明：行内元素的高度仅对应单行文本的行高，设置为inline-block后，元素会根据内容自动调整为包含所有换行内容的完整尺寸，此时伪元素的width: 100%和height: 100%就能完全覆盖整个span区域了。

内容的提问来源于stack exchange，提问作者Troxi