Archived topic
How to add underline effect to linkable texts?
3 replies · Started by Stephen on March 24, 2021
Hello, I am building a site for client but for customizing the linkable texts, I's suffering an issue.
For the text links (on all pages), they asked for a styling like when users's mouse hover over the linkable texts, the linkable texts could be underlined (animated).. Currently the texts effect is only showing the color change, I don't know how to add the underline effect to all linkable texts at once, can you help me with it?
Here is the reference link https://www.awesomescreenshot.com/video/3171583?key=f1258dc451a32aa80612253f36b9ab80
Thanks
Hi Chris,
Try this, let me know if any of the links are missing the style.
.site-content p a:not(.gb-button):hover:before {
left: 0;
right: 0;
transition: all 0.5s ease;
width: 100%;
}
.site-content p a:before {
content: "";
left: 50%;
position: absolute;
bottom: -3px;
height: 1px;
background-color: orange;
display: block;
right: 50%;
width: 0;
}
.site-content p a {
position: relative;
}Hi Ying, sorry for getting back later due to busy business trip. I had added to the CSS part, so far it looks quite good, appreciated it!
You are welcome :)
Glad it works!
