网页上的CSS动画按钮不是'；t运行所有动画（通过Javascript添加到页面的按钮）

我正在做这个网页视觉升级项目，我在让我的动画按钮完全动画化方面遇到了问题。当鼠标悬停在按钮上方时，它们将改变颜色，但它们还应包括按钮文本的轻微移动以及按钮内文本旁边的图标外观

我在一个独立的HTML文档上测试了这个概念，因为在我们的测试服务器上重复测试在每次构建负载之间仍然需要一段时间（谢天谢地，在我的部门之外，这是另一个让人头疼的问题！）

作为独立HTML页面的工作概念如下所示：

.左端{
身高：0；
宽度：0；
左边框：25px实心透明；
右边框：0px实心#780a29；
边框底部：63px实心#780a29；
边框顶部：0px实心透明；
浮动：左；
}
/*按钮2是用来下拉的。目前未使用，但将来可能会使用*/
.按钮，.按钮2{
显示：内联块；
背景色：#780a29；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字体大小：20px；
填充：20px；
宽度：200px；
过渡：均为0.5s；
光标：指针；
边际：0px；
浮动：左；
}
.按钮，.按钮2，跨度{
光标：指针；
显示：内联块；
位置：相对位置；
右：0px；
过渡：0.5s；
}
.按钮跨度：之后{
内容：'\00bb'；
位置：绝对位置；
不透明度：0；
排名：0；
右：0px；
过渡：0.5s；
}
.按钮2跨度：之后{
内容：'\25BC'；
位置：绝对位置；
不透明度：0；
排名：0；
右：0px；
过渡：0.5s；
保证金权利：-0.25em；
字体大小：.75em；
填料顶部：2米；
}
.按钮：悬停，.按钮2：悬停{
背景色：#490619；
}
.按钮：悬停范围{
右边填充：25px；
}
.按钮2：悬停范围{
右边填充：25px；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；
}
.按钮2：悬停范围：之后{
不透明度：1；
右：0；
}
类型1
类型1
类型1

您可以这样简化CSS：

$（文档）.ready（函数（）{
$（“#productToolbar”）.append（'Main Site'）；
$（'#productToolbar'）。追加（'联系我们'）；
$（'#productToolbar'）.addClass（'toolbar-btn-grp leftEndCap'）；
});
函数goHome（）{
window.location.href=https://www.main-site.org/';
}
功能联系人（）{
window.location.href=https://www.main-site.org/contact/';
}

/*
工具栏站点导航链接
未来：浓缩/简化本节
*/
.左端盖{
位置：相对位置；
}
.leftEndCap:之前{
内容：“；
位置：绝对位置；
左：-25px；
排名：0；
身高：0；
宽度：0；
左边框：25px实心透明；
右边框：0px实心#780a29；
边框底部：63px实心#780a29；
边框顶部：0px实心透明；
}
/*tbButton 2用于下拉菜单。目前未使用，但将来可能会使用*/
.toolbar btn grp.tbButton，
.工具栏btn grp.tbButton2{
显示：内联块；
背景色：#780a29；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字体大小：20px；
填充：20px；
宽度：200px；
过渡：均为0.5s；
光标：指针；
边际：0px；
浮动：左；
}
.toolbar btn grp.tbButton，
.工具栏btn grp.tbButton2{
光标：指针；
位置：相对位置；
右：0px；
过渡：0.5s；
}
.toolbar btn grp.tbButton:之后{
内容：'\00bb'；
位置：相对位置；
不透明度：0；
排名：0；
右：10px；
过渡：0.5s；
}
.toolbar btn grp.tbButton2:之后{
内容：'\25BC'；
位置：相对位置；
不透明度：0；
排名：0；
右：20px；
过渡：0.5s；
保证金权利：-0.25em；
字体大小：.75em；
填料顶部：2米；
}
.toolbar btn grp.tbButton:悬停，
.toolbar btn grp.tbButton2：悬停{
背景色：#490619；
}
.toolbar btn grp.tbButton:悬停{
左侧填充：5px
}
.toolbar btn grp.tbButton:悬停：之后，
.toolbar btn grp.tbButton2:悬停：之后{
不透明度：1；
右：-20px
}
.工具栏btn grp{
左边缘：25%；
}

span应该在按钮内，不是吗？您没有在按钮内附加span。这确实有效，谢谢。我想我只是对CSS中的

span

有一个基本的误解。我认为这是将元素放在按钮内容末尾的后面，但显然删除

span

并将

:after

直接放在类中具有相同的效果。我就是想不通为什么。@EtherealBug我只想说span在这种情况下是无用的：）所以代码少了，麻烦也少了；）