Как я могу изменить эти цвета в CSS вместо применения стиля в разметке?
Как я могу изменить эти цвета в CSS вместо применения стиля в разметке? Примечание: каждый из них имеет свой цвет!!!
ul li a{
position: relative;
font-size: 4em;
text-decoration: none;
line-height: 1em;
letter-spacing: 2px;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}
ul li a::before{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0;
overflow: hidden;
border-right: 8px solid var(--clr);
transition: 1s;
}
ul li a:hover::before{
/* Marque both of them */
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
}<ul>
<li style="--clr:#00ade1">
<a href="#" data-text = ' Home'> Home </a>
</li>
<li style="--clr:#ff6493">
<a href="#" data-text =' Services'> Services </a>
</li>
</ul>Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. В том виде, в каком он сейчас написан, трудно точно сказать, о чем вы спрашиваете.
Использовать классы CSS?
Я согласен с Лоуренсом Креоне, эти действительно делают код очень грязным и уродливым. Вот полный проект: codepen.io/rbsn-mnz/pen/QWQdZOV
Ответы 2
Я предлагаю вам использовать псевдокласс ":nth-child"
ul li:nth-child(1) {color: #00ade1; }
ul li:nth-child(2) {color: #ff6493; }
Речь идет об эффектах наведения на текст: codepen.io/rbsn-mnz/pen/QWQdZOV
Чтобы удалить встроенные стили из разметки, используйте вместо них классы CSS. Они чище, их легче поддерживать и легче переопределять, чем встроенные стили.
/* CSS classes are denoted by a leading dot (.)
and are applied to the HTML with the class attribute. */
.blue {--clr:#00ade1; }
.red { --clr:#ff6493; }
ul li a{
position: relative;
font-size: 4em;
text-decoration: none;
line-height: 1em;
letter-spacing: 2px;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}
ul li a::before{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0;
overflow: hidden;
border-right: 8px solid var(--clr);
transition: 1s;
}
ul li a:hover::before{
/* Marque both of them */
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
}<ul>
<li class="blue">
<a href="#" data-text = ' Home'> Home </a>
</li>
<li class="red">
<a href="#" data-text =' Services'> Services </a>
</li>
</ul>Это имеет смысл, а как насчет этих уродливых ' , как я могу избежать их в контексте выше?
Это «объект HTML» для неразрывного пробела (nbsp). Если вам нужен только один пробел, вам не нужен этот escape-код сущности, и вы можете просто вручную вставить символ пробела. Если вам нужно более одного, вам нужно либо обернуть их в элемент pre, либо использовать код объекта.
к чему применяется --clr? почему бы просто не использовать классы CSS :/ также есть такие вещи, как отступы и поля, упаковка с
делает код уродливым