html - :after pseudo-element on multi-line text

Question

有什么方法可以将 :after 伪元素的样式应用于某些多行文本的每一行？

我的代码如下:

.container {
    width: 50px;
}

.text {
    position: relative;
}

.text:after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(red, yellow);
    z-index: -1;
}

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>

从示例中可以看出，after 元素已正确应用，但仅应用于文本的最后一行，是否有任何方法可以让此样式出现在每一行上？

谢谢!

Answer 1

不，没有办法得到你想要的伪。

我发现获得这种效果的唯一方法是使用覆盖底层背景图像的背景图像。在此设置从白色到透明的略微倾斜的过渡。当从左向右移动时，它将覆盖/露出下面的图像

.container {
    width: 100px;
}

.text {
    position: relative;
    font-size: 30px;
    line-height: 1.2em;
    background-image: linear-gradient(to left top, transparent 49%, white 51%);
    background-size: 5000% 1.2em;
    background-position: left center;
    transition: background-position 2s;
}

.text:hover {
    background-position: right center;

}

.text:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    z-index: -1;
    background-size: 100% 1.2em;
    line-height: 1.2em;
}

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>