Left to Right Hyperlink Animation (all hyperlinks)

Hi, I currently have an animation in my navigation bar that shows the underline as an animation when hovering over an option. I am using this code below:

/* Navigation Hyperlink Animation */
.header-nav-item {
a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
}
a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
}

How can I implelement this same feature but have it work for all hyperlinks on all pages?

Thanks 🙂

@Web_Solutions Thank you! This worked :)

@Web_Solutions Would it be possible to implement this same functionality when hovering over images? For example, on this page, when you hover over an image, it will underline the corresponding name, but it isn't animated. Can this be animated too? An example of the code for how this works:

.fe-block-17923ee30e4b127c491c:hover ~ .fe-block-81fb5c488a4c1e3f8586 h4 a {
    border-bottom: 1px solid;
}

Thanks :)

6 hours ago, trianglespace said:

@Web_Solutions Would it be possible to implement this same functionality when hovering over images? For example, on this page, when you hover over an image, it will underline the corresponding name, but it isn't animated. Can this be animated too? An example of the code for how this works:

.fe-block-17923ee30e4b127c491c:hover ~ .fe-block-81fb5c488a4c1e3f8586 h4 a {
    border-bottom: 1px solid;
}

Thanks 🙂

I have posted the solution here