html - 如何使悬停平滑 :after content transition?

Question

这是我的代码:

HTML:

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

CSS:

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

我现在刚学css，我想做的是实现只在悬停时显示文字的按钮，不一定需要通过title属性，我只是觉得这样更容易，对 ARIA 更友好。

但是转换不起作用，我怎样才能让它顺利显示 :after 内容？

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

我尝试跟踪链接的副本，但老实说我无法复制它。

.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/

Answer 1

我会使用类似下面的解决方案:

.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/