линейный градиент ко всему списку против каждого слова - PullRequest
Новая
       10

линейный градиент ко всему списку против каждого слова

3 голосов
/ 18 января 2020

В качестве встроенной навигации у меня есть список, к которому я добавляю цвет градиента. Прямо сейчас градиент влияет на каждую ссылку в отдельности. Я хотел бы, чтобы это повлияло на список от первого слова до последнего. Код ниже:

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

1 Ответ

2 голосов
/ 18 января 2020

Вам нужно применить фон к элементу ul. И вам, вероятно, нужен класс или ID, чтобы отличить guish вашу навигацию от других ul s.

...