Как я могу изменить эти цвета в 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 = '&nbsp;Home'>&nbsp;Home&nbsp;</a>
   </li>
   <li style="--clr:#ff6493">
   <a href="#" data-text ='&nbsp;Services'>&nbsp;Services&nbsp;</a>
   </li>
</ul>

к чему применяется --clr? почему бы просто не использовать классы CSS :/ также есть такие вещи, как отступы и поля, упаковка с &nbsp; делает код уродливым

Lawrence Cherone 16.05.2022 21:00

Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. В том виде, в каком он сейчас написан, трудно точно сказать, о чем вы спрашиваете.

Paulie_D 16.05.2022 21:01

Использовать классы CSS?

Scott Marcus 16.05.2022 21:03

Я согласен с Лоуренсом Креоне, эти &nbsp; действительно делают код очень грязным и уродливым. Вот полный проект: codepen.io/rbsn-mnz/pen/QWQdZOV

robson_muniz 16.05.2022 22:26
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
1
4
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я предлагаю вам использовать псевдокласс ":nth-child"

ul li:nth-child(1) {color: #00ade1; }
ul li:nth-child(2) {color: #ff6493; }

Речь идет об эффектах наведения на текст: codepen.io/rbsn-mnz/pen/QWQdZOV

robson_muniz 16.05.2022 21:28
Ответ принят как подходящий

Чтобы удалить встроенные стили из разметки, используйте вместо них классы 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 = '&nbsp;Home'>&nbsp;Home&nbsp;</a>
   </li>
   <li class="red">
   <a href="#" data-text ='&nbsp;Services'>&nbsp;Services&nbsp;</a>
   </li>
</ul>

Это имеет смысл, а как насчет этих уродливых '&nbsp;, как я могу избежать их в контексте выше?

robson_muniz 17.05.2022 00:16

Это «объект HTML» для неразрывного пробела (nbsp). Если вам нужен только один пробел, вам не нужен этот escape-код сущности, и вы можете просто вручную вставить символ пробела. Если вам нужно более одного, вам нужно либо обернуть их в элемент pre, либо использовать код объекта.

Scott Marcus 17.05.2022 15:11

Другие вопросы по теме