CSS：在悬停时替换文本，但无法顺利过渡到新文本吗？

Question

场景：

[如果用户将鼠标悬停在文本（例如h1标签）上，则应更改为新文本。新文本应显示流畅。

到目前为止我所做的：

我能够用“ display：none”和“ content：'This is the new text”-属性替换一个新文本。我的问题是新文本显示不流畅（不会淡入/过渡）。我也尝试使用不透明度，但是它不能代替我的旧文本（相反，它会消失，而新文本会显示在它旁边）。

这里是JSFiddle和代码段：

.my_div {
  background-color: red;
}
.my_div:hover {
  background-color: green;
  transition: all 500ms ease-in-out;
}
.my_div:hover .title span {
  display: none;
}
.my_div:hover .title:after {
  content: "A wild text appears";
}
<div class="my_div">
  <h1 class="title"><span>This is the old text</span></h1>
</div>

方案：如果用户将鼠标悬停在文本（例如h1标签）上，则应更改为新文本。新文本应显示流畅。到目前为止，我已经完成了什么：我能够用新的......>

Answer 1

这里是一个非常简单的示例

（（此fiddle使用伪元素，而不是内部div的下面）

Answer 2

[好，因此，第一部分，您不能为显示属性设置动画，需要解决方法。为此，我们回到可以进行动画处理的地方，即不透明度和宽度/高度

Answer 3

这个问题已经得到回答，但是我认为最好的方法是使用伪元素。非常简单干净。但是：

Answer 4

CSS动画是凉。整齐。太棒了时髦。魔法。