[Support request] Underlining my hyperlinks with animation?

Home Forums Support Underlining my hyperlinks with animation?

This topic contains 1 reply, has 2 voices, and was last updated by  David 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1209143

    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!

    #1209337

    David Customer Support

    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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.