使用CSS:after对按钮进行着色：悬停

我正在尝试向我的按钮添加一系列不同的颜色类，并允许任意添加其他类。所有这些都应该在悬停时变暗。编写<代码>按钮（颜色）：悬停<代码>规则适用于每种颜色，因此我编写此命令时，会使<代码>：after<代码>部分变暗并覆盖按钮背景

但是，我无法根据需要将

：after

部分设置在按钮文本和背景之间。目前，它还对文本进行着色处理。这里的想法是删除添加新按钮元素或新按钮颜色类的任何繁琐部分，因此我希望避免为每种颜色添加额外的html或css规则。想法

按钮{
边界：0；
填充：1em；
位置：相对位置；
光标：指针；
背景：无；
}
按钮：之后{
内容：“；
过渡：背景色。3s轻松；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
按钮：悬停：在{背景色：rgba（0,0,0,0.3）；}之后
绿色{背景色：#6c842e；颜色：#ffffff；}
button.red{背景色：#ff4444；颜色：#ffffff；}

Boop
波普
Boop

如何使用

框阴影

按钮{
边界：0；
填充：1em；
位置：相对位置；
光标：指针；
背景：无；
}
按钮：悬停{
长方体阴影：插入0 50px rgba（0,0,0,0.2）；
}
按钮，绿色{
背景色：#6c842e；
颜色：#ffffff；
}

Boop
Boop看起来像是一个黑客，但它是有效的。在接受你的答案之前，我会等着看是否有一个不太老套的答案。这还有一个额外的好处，就是转换非常简洁。我可以很容易地添加一个额外的标签，但你说你更喜欢避免这样，这是你的选择，如果你需要的话，这里有一个。