Archived topic
Links style question
5 replies · Started by Albert on February 24, 2022
Hello! I currently use the following CSS class for links in paragraphs:
.entry-content a {border-bottom: 2px solid #ffc59f;}
.entry-content a:hover {border-bottom: 2px solid #da6518;}
I would like to know how I can apply this effect:
https://codepen.io/geoffgraham/pen/GXoOdK
Thank you
Hi there,
try this:
.entry-content p a {
background: linear-gradient(to bottom, #ffc59f 0%, #ffc59f 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: #000;
text-decoration: none;
transition: background-size .2s;
}
.entry-content p a:hover {
background-size: 4px 50px;
}In this line:
background: linear-gradient(to bottom, #ffc59f 0%, #ffc59f 100%);
You will see 2 x instances of the same color: #ffc59f
If you want a different color you need to change both of them to the new color.
Thank you very much, it works perfectly.
But I would be interested if the buttons were left out of this style. How can I do it?
Here you can see a button.
I updated the CSS above - it now ill only target links within text
Absolutely delighted with your technical support. Millions of thanks!
Glad to be of help!
