整个列表的线性梯度对每个单词的线性梯度

Question

我有一个列表，作为向其添加渐变色的嵌入式导航。现在，渐变会单独影响每个链接。我希望它能影响从第一个单词到最后一个单词的列表。下面的代码：

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;
}

HTML：

<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>

jsfiddle

Answer 1