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。

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

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/

如何顺利悬停：内容过渡后？

1 个答案: