如何使文本在 CSS 中的按钮悬停时显示动画？答案

【问题标题】：How to make text reveal animation on button hover in CSS?如何使文本在 CSS 中的按钮悬停时显示动画？
【发布时间】：2020-05-16 06:28:41
【问题描述】：

大家好，

我正在尝试在按钮悬停上制作一个打开动画，但是要显示的文本会跳到两行直到动画完成。我可以更改按钮文本和宽度动画效果很好，但下一个文本完全搞砸了。以下是一些截图：

HTML

<button id="button_closed"><span>+</span></button>

CSS

#button_closed {
    height: 50px;
    width: 50px;
    background:    #00ff00;
    border: none;
    border-radius: 25px;
    color:         #ffffff;
    font:          normal bold 22px "Open Sans", sans-serif;
    text-align:    center;
}

#button_closed:hover span {
    display: none;
}

#button_closed:hover {
    width: 180px;
    transition: width 1s;
}

#button_closed:hover::after {
    content: "New Project";
}

如果有人可以分享解决方案或工作教程，我将不胜感激。 提前致谢！

【问题讨论】：

您是否尝试过#button_closed:hover span::after { content: "New Project";} 并删除#button_closed:hover span 以及您需要在#button_closed 中为宽度添加过渡。
不起作用:(谢谢，我修复了过渡。

标签： html css

【解决方案1】：

将这些添加到按钮的 CSS 中：

  white-space: nowrap;
  overflow: hidden;

【讨论】：

【解决方案2】：

#button_closed {
    height: 50px;
    width: 50px;
    background:    #00ff00;
    border: none;
    border-radius: 25px;
    color:         #ffffff;
    font:          normal bold 22px "Open Sans", sans-serif;
    text-align:    center;
    overflow: hidden;
}

#button_closed:hover span {
    display: none;
}

#button_closed:hover {
    width: 180px;
    transition: width 1s;
}

#button_closed::after {
  content: "";
  width: 160px;
  display: none;
}

#button_closed:hover::after {
    content: "New Project";
    display: inline-block;
}

&lt;button id="button_closed"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/button&gt;

【讨论】：