How can I change these colors in CSS instead of applying style in the Markup? Note: Each one of them has a different color!!!

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>

CodePudding user response：

To remove the inline styles from the markup, use CSS classes instead. They are cleaner, easier to maintain and easier to override than inline styles.

/* 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 >
   <a href="#" data-text = '&nbsp;Home'>&nbsp;Home&nbsp;</a>
   </li>
   <li >
   <a href="#" data-text ='&nbsp;Services'>&nbsp;Services&nbsp;</a>
   </li>
</ul>

CodePudding user response：

I suggest you use the ":nth-child" pseudo-class

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