(2019-04-06, 11:07 AM)kbilly Wrote: [ -> ]Still seeking for help.
This goes from left to right but it is near enough the same effect.
a:link {
color: #0072BC;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
a:visited {
color: #0072BC;
text-decoration: none;
}
a:hover,
a:active
a:focus {
background-size: 100% 2px;
color: #0072BC;
text-decoration: underline;
}
(2019-04-09, 01:49 PM)iAndrew Wrote: [ -> ] (2019-04-06, 11:07 AM)kbilly Wrote: [ -> ]Still seeking for help.
This goes from left to right but it is near enough the same effect.
a:link {
color: #0072BC;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
a:visited {
color: #0072BC;
text-decoration: none;
}
a:hover,
a:active
a:focus {
background-size: 100% 2px;
color: #0072BC;
text-decoration: underline;
}
Hello and thanks for your help and time.
It worked and i like it.
Would just need a little modification if possibile, when i pass over my forum's logo with the cursor, this effect happens also there and i would like to remove this.
Is it possibile?
(2019-04-13, 09:56 AM)kbilly Wrote: [ -> ]Hello and thanks for your help and time.
It worked and i like it.
Would just need a little modification if possibile, when i pass over my forum's logo with the cursor, this effect happens also there and i would like to remove this.
Is it possibile?
Add this in global.css
#logo a:hover {
background: #fff;
color: #0072BC;
border-bottom: 0 !important;
background-size: 0% 0px !important;
text-decoration: underline;
}
Hello and really thanks for help bro.
I adapted your settings to my taste and like this:
a:link {
color: #0072BC;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 0px;
transition: background-size .9s;
}
a:visited {
color: #0072BC;
text-decoration: none;
}
a:hover,
a:active
a:focus {
background-size: 100% 1px ;
color: #0072BC;
}
#logo a:hover {
background: #222222;
color: #0072BC;
border-bottom: 0% !important;
background-size: 0% 0px !important;
text-decoration: underline;
}
#foot a:hover {
background-size: 0% 0px ;
}
Now you can see that the underline doesn't close to left but starts from center and close itself to the center as i wished.
I really appreciated your help.
Kind regards.