Here's what my code looks like: (please run the code snippet below)

.hover-underline-animation {
    display: inline-block;
    position: relative;
    font-size: 22px;
    text-decoration: none;
    color: #333;
}

.hover-underline-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    color: #243b55;
}

.hover-underline-animation:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #243b55;
}

.active-hover-underline-animation {
    display: inline-block;
    position: relative;
    font-size: 22px;
    text-decoration: none;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    color: #0087ca;
}

<a class="hover-underline-animation" href="#">Hover me to see the effect</a> <br>

<p>There's a text below me that is now hidden because its CSS isn't working as I intended.</p>

<a class="active-hover-underline-animation" href="#">Why can't I get the same effect even if not hovered when static?</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Basically, what I want to achieve is to style the second link -- with blue underline and text-color that looks the same as the first link-- without having to hover to see its styling.

There's no need for the animation effect, just the final output (what it looks like after the animation is finished.

I'm going to use this to show to the users this is the current page they're in.

EDIT: Why can't I get the same effect as the first link for the second link without having to hover to see its style?

Thanks in advance!

CodePudding user response：

Currently the class styling your second link is this:

.active-hover-underline-animation {
    display: inline-block;
    position: relative;
    font-size: 22px;
    text-decoration: none;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    color: #0087ca;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Beware that I think you should just delete the class since it is meant to be applied to the pseudo element ::after and not to the anchor tag. The element is not showing because the said class is shrinking the element to 2px with the line height: 2px;.

The following line text-decoration: none; removes the underline which is present by default on all anchor tags. So you need to remove that line and add a line to change the color of the underline (see documentation) like the following: text-decoration-color: #0087ca;.

If you want a class to style an anchor tag just use the following applying you favourite class name and you can apply it to the anchor element of your choice with the HTML attibute like in the following:

.your-class-name {
  text-decoration-color: #0087ca;
  text-decoration-thickness: 2px;
}

<a href="#" class="your-class-name">I'm an anchor tag</a>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>