[Support request] Underlining my hyperlinks with animation?

[Chad]

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!

[David]

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;
}

[Author]

Posts