CODEWITHSUNDEEP
csscss-transitions
mtkcs
mtkcs

Reputation: 1716

Reverse direction of css transition

When I hover over the anchor tag <a>, the border-bottom appears from top to bottom, how to reverse it so the border-bottom appear from bottom to top?

My current style:

a {
    display: inline-block;
    transition: border .5s ease-in-out;
}

a:hover {
    border-bottom: 4px solid ;
}

Upvotes: 3

Views: 6440

Answers (1)

Sid Verma
Sid Verma

Reputation: 576

A bottom-padding decreasing in width, while the border increases would do the job.

a {
    padding-bottom:4px;
    display: inline-block;
}
a:hover {
    padding-bottom:0;
    border-bottom: 4px solid;
    transition: border .5s ease-in-out, padding .5s ease-in-out;
}

Working JSFiddle

Upvotes: 6

Related Questions