Css 整个列表的线性渐变与每个单词的线性渐变

我有一个列表作为内联导航，我正在添加渐变颜色。现在，梯度会单独影响每个链接。我希望它能从第一个单词到最后一个单词。代码如下：

CSS:

HTML:

---

您需要将背景应用于

ul

元素。您可能需要一个类或ID来区分您的导航与其他

ul

s。

谢谢。如果它们不是链接的话，这似乎是可行的，但是由于列表是所有链接，如果我把代码放在ul上，它们就变得不可见了。好吧，按照你的建议，完全删除ul LIA{css并将渐变代码添加到ul上，这就行了。但是现在ul LIA:hover{css即使我添加了，也不会起作用！重要；

ul li {
    display: inline;
    list-style-type: none;
    padding: 0 0 0 40px;
}

ul li a {
    position: relative;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>