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

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

您需要将背景应用到 ul元素代替。你可能需要一个类或 ID 来区分你的导航和其他 ul s。