Why does this CSS a::after show transition after hovering?

Question

I found some code for a link hover effect and while it works fine, I don't understand why it works.

Specifically:

#navbar a:after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    height: 1em;
    width: 100%;
    border-bottom: 1px solid;
    margin-top: 10px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;  
    -webkit-transform: scale(0,1);
    transform: scale(0,1);

}

#navbar a:hover:after {

    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(0.9);
}

This produces an underline effect on the link when hovering.

My question is: 1.) Why doesn't the transition/transform on the a:after take place when the page loads? Why does it only occur when hovering over the element (even though it's not within the hover)?

Although I can obviously see what is occurring from viewing the page, trying to better understand how exactly this works.

Vicky Kumar · Accepted Answer · 2019-08-30T03:24:58.483

1

I have added one fiddle where you can go and check the code

[https://jsfiddle.net/vickykumarui/96xw3fzv/][1]

Now let me explain what is happening on hover

Initially you have add this code for pseudo element after

transform: scale(0.1); // The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.
opacity: 1; // initially after element is not visible

Now on hover this property changes to

 transform: scale(0.9);
 opacity: 1;

When these properties changes it does not changes suddenly but it changes slowly in .35s in animated way from this code

 transition: opacity 0.35s, transform 0.35s;

transition is applied on both property opacity and transform and 0.35s is time of transition

Note: Based on your comment if you change initial property to

opacity: 1;
 transform: scale(0.9);

You see that coming initially also

edited Aug 30 '19 at 03:24

answered Aug 30 '19 at 03:22

Vicky Kumar

1,358
1
14
26

But doesn't that transition apply when the page loads (not during hover) since the transition isn't within the a:hover:after? Why would a transition in a:after apply to the hover? That's what I'm not getting. – qscott86 Aug 30 '19 at 03:24
1

No because transition will be applied only when that property mentioned in transition changes – Vicky Kumar Aug 30 '19 at 03:27
Oh I see now. I guess I assumed it applies during the initial transform/opacity within the a:after. Thanks. – qscott86 Aug 30 '19 at 03:30
Cheers, if you want to achieve transition on page load this is what you can try https://stackoverflow.com/questions/6805482/css3-transition-animation-on-load – Vicky Kumar Aug 30 '19 at 03:32

score 0 · Answer 2 · answered Aug 30 '19 at 03:16

0

It does happen. Change the opacity to 1 in the first rule. You don't see it because it's technically hidden when the page loads. When you hover, the opacity becomes one and becomes visible.

answered Aug 30 '19 at 03:16

QT Ray

1,256
8
12

I've tried changing the opacity to 1 in the a:after and it still does not look any different. That's part of what I'm confused about. Now if I remove the transform: scale(0,1), it does, but that has a 0.35s transition and I don't see the underline at all when the page loads. Can't understand why they'd include a transition in a:after since it's not even seen until you hover. – qscott86 Aug 30 '19 at 03:18

Why does this CSS a::after show transition after hovering?

2 Answers2