Javascript 显示新文本的转换按钮

当我将鼠标悬停在按钮上时，我想在新文本中转换

我已经成功地转换出了框的阴影和颜色，但似乎无法得到下一个显示

到目前为止，我的代码是：

CSS:

HTML:

试试这个

<a href="mylink" id="button2"><span>start a free trial</span></a>

---

这不是

内容

属性的用途。它的目的是设计样式…而不是实际文本。您可以使用

content:newtext

将新文本附加到现有内容

#button2:hover:before{

将在现有文本前面添加新文本，

#button2:hover:before

将在现有文本末尾添加新文本。谢谢，我正在寻找替换文本的方法，使用了@Kida解决方案，该解决方案可以工作但不会转换新文本？谢谢，它显示了新文本但不会转换新文本？

<a href="mylink" id="button2">start a free trial</a>

<a href="mylink" id="button2"><span>start a free trial</span></a>

#button2:hover span {display:none}
#button2:hover:before {content: "New text"}