I am trying to switch the underline to a bottom border on my website to make it fade and also have a rainbow text effect for credit with my friend’s help. Neither me or him can figure it out.
I tried this code:
.center-rainbow {
text-align: center;
text-decoration: none;
}
.center-rainbow a {
text-decoration: none;
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
background-clip: text;
color: transparent;
animation: rainbow 5s infinite;
transition: 0.5s ease;
}
.center-rainbow a:hover {
transition: 0.5s ease;
text-decoration: none;
border-bottom: 1px solid;
}
@keyframes rainbow {
0% {
color: red;
text-shadow: 0 0 10px white;
border-color: red;
}
14.3% {
color: orange;
text-shadow: 0 0 10px white;
border-color: orange;
}
28.6% {
color: yellow;
text-shadow: 0 0 10px white;
border-color: yellow;
}
42.9% {
color: green;
text-shadow: 0 0 10px white;
border-color: green;
}
57.2% {
color: blue;
text-shadow: 0 0 10px white;
border-color: blue;
}
71.5% {
color: indigo;
text-shadow: 0 0 10px white;
border-color: indigo;
}
85.8% {
color: violet;
text-shadow: 0 0 10px white;
border-color: violet;
}
100% {
color: red;
text-shadow: 0 0 10px white;
border-color: red;
}
}<div class="center-rainbow">
<a href="https://teknixstuff.com"><img src="images/teknixstuff.png" width="16" height="16" alt="Tech Stuff Logo"> Tech Stuff, the amazing guy who helped!</a>
</div>And I am now wondering why it won’t work.
New contributor
Joey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
8
I am not exactly sure what you are trying to achieve, but I think you want there to be an underline (albeit not the standard “a link”, but a bottom border) already showing before the transition starts.
The problem therefore appears to be with the location of this style:
border-bottom: 1px solid;
You have put this in the .center-rainbow a:hover selector, whereas I think you want to put it in the .center-rainbow a selector, so that the border appears from the start and not only when you hover over the link.
I have also made the border thicker so it is quite visible.
.center-rainbow {
text-align: center;
text-decoration: none;
}
.center-rainbow a {
text-decoration: none;
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
background-clip: text;
color: transparent;
animation: rainbow 5s infinite;
transition: 0.5s ease;
border-bottom: 10px solid;
}
.center-rainbow a:hover {
transition: 0.5s ease;
text-decoration: none;
}
@keyframes rainbow {
0% {
color: red;
text-shadow: 0 0 10px white;
border-color: red;
}
14.3% {
color: orange;
text-shadow: 0 0 10px white;
border-color: orange;
}
28.6% {
color: yellow;
text-shadow: 0 0 10px white;
border-color: yellow;
}
42.9% {
color: green;
text-shadow: 0 0 10px white;
border-color: green;
}
57.2% {
color: blue;
text-shadow: 0 0 10px white;
border-color: blue;
}
71.5% {
color: indigo;
text-shadow: 0 0 10px white;
border-color: indigo;
}
85.8% {
color: violet;
text-shadow: 0 0 10px white;
border-color: violet;
}
100% {
color: red;
text-shadow: 0 0 10px white;
border-color: red;
}
}<div class="center-rainbow">
<a href="#"><img src="images/teknixstuff.png" width="16" height="16" alt="Tech Stuff Logo"> Tech Stuff, the amazing guy who helped!</a>
</div>