Can I set a variable color for a link in CSS?

Question

I'm working with React JS + Bootstrap and I want to know how to define a CSS class to html hyperlink elements in some way that, whatever state it has (link, hover, active, etc.), its color wont change.

For example, I have this classes:

:root{
  --black: #3B424C;
  --white: #FFFFFF;
}

.black{
  color: var(--black);
}

.white{
  color: var(--white);
}

.custom-hyperlink:link{
  text-decoration: none;
  font-weight: bold;
}

So, when I want to create a black colored hyperlink, I do:

<a className="custom-hyperlink black" target="_blank" href="#">Example text</a>

And when I want to create a white one, I type "white" instead of "black", but, no matter which color I want, when I hover the hyperlink it changes to blue

I hope you can help me, thanks in advance!

Answer 1

You have to define the color on hover. Blue is the browser default. So when you wan't the same color on hover it would be:

 .black, .black:hover { color: var(--black); }.white, .white:hover { color: var(--white); }