Html 设置动画：悬停：之后

我有以下css规则：

button:hover:after {
    content: ' ' attr(title);
}

基本上，按钮有一个图标作为内容和标题属性。当您将鼠标悬停在按钮上时，它将为按钮内容添加一个空格，然后添加标题。看

---

现在的问题是，我该如何设置动画？我希望按钮的新宽度设置动画，这样它就不会显得如此静态和丑陋。

我找到了一个解决方案，它可以工作，但可能不是最好的方式

button:after {
    content:' ' attr(title);
    visibility: hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
    font-size: 0;
}
button:hover:after {
    content:' ' attr(title);
    visibility: visible;
    opacity:1;
    transition-delay:0s;
    font-size: 13px;
}

背景

您的方法类似于使用display属性。因此，我的小技巧是在初始

：after

状态中将字体大小减小到0

更新

更平滑的过渡：

button:after {
    content: ' ' attr(title);
    font-size: 0;
    opacity: 0;
    transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}

button:hover:after {
    font-size: inherit;
    opacity: 1;
    transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}

---

请参见

它可以像这样工作，但对于此解决方案，您必须为按钮设置固定宽度

button:hover:after {
    content: ' ' attr(title);
}

button:hover{
    width:70px;
}

button{
    width:20px;
    overflow:hidden;
    white-space:nowrap;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
}

---

在

上设置
过渡
：悬停

没有意义您还应该为按钮的宽度添加一个过渡，这样看起来会更好：-）看到这就是问题所在。我尝试设置宽度动画，我确实想要宽度（不仅仅是瞬间宽度，然后淡入文本，这看起来很奇怪），但我无法设置宽度动画。我试过chrome和firefox，但宽度不会被设置动画。明白了。您不能更改标记以在按钮内添加跨距？将

宽度0.5s线性

替换为

字体大小0.1s线性

？我也在考虑这个问题，但您以前可能不知道按钮的大小。这取决于字符串。因此，您需要javascript来计算它。这不合适，因为我有很多不同宽度的按钮。