Archived topic
Underlining my hyperlinks with animation?
1 reply · Started by Chad on March 24, 2020
Hi,
I have simple css and I'm using a lot of black on white and white on black text, so I'm trying to get hyperlinks that are easy to discern still using the same text color. Can you tell me how to bring in site wide underlining of hyperlinks. Ideally with animation with a rollover similar to what this site has in its text?
https://betches.com/how-many-calories-your-favorite-workout-classes-actually-burn/
I'm using Brizy page builder on my pages but not yet in my blog.
Thank you!
Hi there,
there is no simple solution to adding link styles globally as many elements use the <a> tag you would not want styling applied. Also when you add a pagebuilder you introduce a whole load of new elements and styles that are outside our scope. But for single posts, which the theme is still responsible for you can target the links within the entry content like so:
.inside-article .entry-content a {
position: relative;
}
.inside-article .entry-content a:before,
.inside-article .entry-content a:after {
content: "";
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: #212529;
will-change: transform;
content: "";
-webkit-transition: all .4s cubic-bezier(.77, 0, .175, 1);
-o-transition: all .4s cubic-bezier(.77, 0, .175, 1);
transition: all .4s cubic-bezier(.77, 0, .175, 1);
}
.inside-article .entry-content a:before {
-webkit-transition-delay: .1s;
-o-transition-delay: .1s;
transition-delay: .1s;
-webkit-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.inside-article .entry-content a:after {
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.inside-article .entry-content a:hover:before {
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.inside-article .entry-content a:hover:after {
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
-o-transition-delay: .1s;
transition-delay: .1s;
}