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

要对每行文本应用不同的水平颜色渐变，可以使用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>

在上面的代码中，我们创建了一个名为.gradient-text的类，它用于包裹需要应用渐变的文本。通过设置position: relative和display: inline-block，确保伪元素可以相对于文本进行定位。

然后，我们使用伪元素::before来创建一个与文本重叠的背景元素。通过设置background属性为linear-gradient(to right, #ff0000, #00ff00)，我们定义了一个从红色到绿色的水平渐变背景。接着，使用-webkit-background-clip: text和-webkit-text-fill-color: transparent属性，将背景限制在文本区域内，并使文本透明，从而显示出背景渐变。

最后，我们使用伪元素::after来创建一个与文本重叠的实际文本元素。通过设置color属性为所需的文本颜色（例如黑色），确保文本可见。

你可以在.gradient-text元素上添加不同的文本内容，每个元素都会应用不同的水平颜色渐变。

请注意，这只是一个示例代码，你可以根据需要进行修改和调整。