这段CSS代码如何对每行文本应用不同的水平颜色渐变？

<style>
    .gradient-text {
        position: relative;
        display: inline-block;
    }

    .gradient-text::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background: linear-gradient(to right, #ff0000, #00ff00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .gradient-text::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        color: #000000;
    }
</style>

<div class="gradient-text" data-text="Hello World"></div>
<div class="gradient-text" data-text="Lorem Ipsum"></div>