How to make a smooth hover:after content transition?

Question

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/

the second dup talk about height but the same logic apply to heigh/width — Temani Afif, Apr 13 '18 at 19:34
To be honest I wasn't able to replicate it, updated with what I tried — Mojimi, Apr 13 '18 at 19:49
@Mojimi Check the updated fiddle. https://jsfiddle.net/xpvt214o/122128/ — mechanicious, Apr 13 '18 at 19:52
@Bright can't it be done using content and without having to add a new element? — Mojimi, Apr 13 '18 at 20:28
Your pseudo-element is inline so max-width won't work for it. The best way would be to make it inline-block — Axnyff, Apr 14 '18 at 03:45

mtthwmsn · Accepted Answer · 2018-04-15T10:13:35.410

2

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/

edited Apr 15 '18 at 10:13

answered Apr 14 '18 at 10:31

mtthwmsn

101
1
6

Ahh thats clever – Mojimi Apr 14 '18 at 13:30
Could you explain why the transition isn't on the hover? – Mojimi Apr 14 '18 at 13:34
1

@Mojimi Think of a `transition` as a two-state animation. When you declare a `transition`, you declare which CSS properties *will animate when their value changes*. In this case, I've declared a value for `letter-spacing` and `opacity`, then stated in the `transition` that both properties should animate. So when I re-declare the value of `letter-spacing` and `opacity` in the pseudo-class `:hover`, they will transition from the values I declared in the initial state to the new values I declared in the hover state. – mtthwmsn Apr 15 '18 at 10:18
1

@Mojimi in the jsfiddle, try switching the transition from the initial state to the `:hover` state - you will see that the animation occurs on hover, but not when you move the cursor away from the button. This is because there is no `transition` declared for the button in it's initial state, rather the animation only happens when you hover on it. This could be a behaviour you may require in some circumstances – mtthwmsn Apr 15 '18 at 10:26

How to make a smooth hover:after content transition?

1 Answers1