Home › Forums › Air WordPress Theme › Animate underline for (1) one hyperlink and (2) all hyperlinks
- This topic has 16 replies, 2 voices, and was last updated 5 years, 11 months ago by
ratalo.
-
AuthorPosts
-
June 9, 2020 at 3:21 pm #21552
Hello,
I like the underline that I have in my menu. I tried to animate a button in a similar manner, but nothing works.
Could you please provide custom CSS to try for two options?
(1) animation for one hyperlink
(2) animation for all hyperlinks
Thank you.
June 9, 2020 at 3:24 pm #21553Images didn’t work. Trying again:

June 9, 2020 at 3:25 pm #21554OK so excuse me for the mess, but this thing doesn’t play gifs or I don’t know how to do it, The animation is here: https://ibb.co/61p23Mz
June 10, 2020 at 2:30 am #21559Hi,
1) You need to add a link, please add class namecustom_linkto the link, like<a href="xxx" class="custom_link">Text</a>, the custom CSS is:a.custom_link { position: relative; } a.custom_link:before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: currentColor; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; transform-origin: 100% 0; } a.custom_link:hover:before{ -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); }2)
the custom CSS is:.entry a,.widget-container a { position: relative; } .entry a:before, .widget-container a:before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: currentColor; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; transform-origin: 100% 0; } .entry a:before,.widget-container a:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); }The custom CSS is not for the whole website, it is for the content area(
.entry a) and sidebar(.widget-container a). The global CSS would affect unknown issue. If you want to add some other places, please point it.Regards!
SeaTheme – SeaTheme.net – Twitter – Facebook
June 10, 2020 at 11:09 am #21565Hey,
Thanks. You guys are so supportive. I appreciate your help.
Your code worked but the underline appears from the center. I’m looking for something different. I have 2 thinks I’d like to ask for:
A.) Could we modify code no. 1 so that the underline goes from left to right, please? Example:
B.) Could we adjust the code no. 1 for hyperlink underline in the menu so that the animation is the same? Right now, I have this effect below.
Problem: afer the animation finishes, the underline loses width by a half.
I’d really be thankful for your help. The theme is sweet.
June 10, 2020 at 11:10 am #21567June 11, 2020 at 10:39 am #21581Hi,
The custom CSS should work from left to right. Please leave your web page. I will check the lived page. thanks
Besta
June 12, 2020 at 2:00 pm #21600This reply has been marked as private.June 12, 2020 at 2:02 pm #21602This reply has been marked as private.June 13, 2020 at 4:17 am #21606Hi,
Please try to add the custom CSS:
a.custom_link:before { transition: all 0.5s; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; }The animation is not changed to 1px when hover on my browser. Could you paste a screencast video?
Best
June 15, 2020 at 10:40 am #216171.
Hi,
Please try to add the custom CSS:
a.custom_link:before {
transition: all 0.5s;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
}Doesn’t work at all. The only code that’s doing something decent is this custom that I’ve found online:
/* Button hover custom link B */
a.custom_link {
position: relative;
display: inline-block !important;
line-height: 1.6 !important;
}
a.custom_link:before{
content: ”;
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background-color: #77CDAF;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
a.custom_link:hover:before{
visibility: visible;
width: 100%;
}# # #
2.
Problem with the menu link underline losing height appears on: (desktop, no extensions) Chrome, Vivaldi, Brave, Firefox. Preview:
June 15, 2020 at 4:18 pm #21620AD 2
The problematic class in question is: gallery-link-a. The effect of the underline being thinned is the same if you assign the class to any link.
June 16, 2020 at 2:16 am #21623Hi,
I tested the CSS on your HTML page. There may be caused by other reasons.
I need to check the lived webpage. It is hard to find the reason only by description.
I will check the website directly if your website is lived, is ok?Best
June 16, 2020 at 8:08 am #21629This reply has been marked as private.June 16, 2020 at 10:28 am #21630I found a code that provides the exact animation we’d be looking for:
a.custom_link {
display: inline;
position: relative;
overflow: hidden;
text-decoration: none !mportant;
}
a.custom_link:after {
content: “”;
text-decoration: none;
position: absolute;
right: 0;
width: 0;
bottom: -2px;
background: #6acebb;
height: 2px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
a.custom_link:hover:after,
a.custom_link:focus:after,
a.custom_link:active:after {
left: 0;
right: auto;
width: 100%;
}Works with buttons – you’ll see it live on the page. The question is – how can we apply that to the menu?
June 17, 2020 at 3:00 am #21639This reply has been marked as private.June 18, 2020 at 2:09 pm #21657Hey,
1. Link underline in Menu problem
Fixed by a miracle. Thank you.
2. Link underline for custom button
I’ll use the codes provided here later. For now, I just changed the style of it not to be bothered too much. Thanks again.
I think I have everything here.
-
AuthorPosts
- You must be logged in to reply to this topic.



