CODEWITHSUNDEEP
htmlcssbootstrap-4
Mojimi
Mojimi

Reputation: 3161

How to make a smooth hover:after content transition?

Here's my code :

Html:

<button class="btn btn-primary btn-icon" title="Next">>></button>

Css:

.btn-icon:hover::after{
        content: " "  attr(title);
        transition:width 1s ease;
}

I'm just learning css now, and what I'm trying is to achieve a button that shows its text only on hover, doesn't necessarily needs to be through the title attribute, I just thought it was easier and more ARIA-friendly this way.

But the transition is not working, how can I make it show the :after content smoothly?

JsFiddle: https://jsfiddle.net/xpvt214o/121984/

I tried following the linked duplicates, but to be honest I couldn't replicate it.

.btn-icon:after{
  content: " "  attr(title);
  max-width: 0;
}

.btn-icon:hover:after{
    max-width: inherit;
    transition: 2s ease;
}

Fiddle: https://jsfiddle.net/xpvt214o/122123/

Upvotes: 1

Views: 1821

Answers (1)

mtthwmsn
mtthwmsn

Reputation: 101

I'd use something like the following solution:

.btn-icon::after{
    content: " "  attr(title);
    text-indent: -9999px;
    letter-spacing: -10px;
    opacity: 0;
    transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
    text-indent: 0px;
    letter-spacing: normal;
    opacity: 1;
}

https://jsfiddle.net/xpvt214o/124097/

Upvotes: 2

Related Questions