Why doesn't my hyperlinks text color change?-CodePudding

After trying multiple time i still have failed to change the text color. I have put the in the to get them to line up, I don't know if this would be causing the problem though. Here is my CSS code for my link.

a {
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.5s ease-in-out;
}

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

a:hover {
 background-position: 0;
}

a:hover::before {
  width:100%;
}

<a href="#">Hello World</a>

I have tried everything I could, I tried changing the text color and the nav text color. Usually the a {} should work but this time it didn't

CodePudding user response：

When you use -webkit-text-fill-color css property, it specifies the color of the text no matter the value that you set in the color property. So you need to set the color that you want there or just remove that property the value of the color property is used.

set this:

a {
  color: #fff;
  /* other properties*/
  -webkit-text-fill-color: red;
}

or this:

a {
    color: red;
    /* other properties*/
}

Demo:

a {
  color: red;
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  /*-webkit-text-fill-color: transparent;*/
  transition: all 0.5s ease-in-out;
}

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

a:hover {
 background-position: 0;
}

a:hover::before {
  width:100%;
}

<a href="#">Hello World</a>

CodePudding user response：

background image is set to black and that is controlling what color it is. Changing it to white and it will become white.

background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );

a {
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #FFF 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.5s ease-in-out;
}

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

a:hover {
 background-position: 0;
}

<a href="#">Hello World</a>