如何平滑悬停：内容转换后？

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;
}

小提琴：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/