Css 使用sass悬停时未显示图标

我正在使用scss并试图隐藏图标，当我悬停按钮时，我希望图标显示出来。我还想设置动画，所以我不能使用display:none，因为我相信你不能设置动画。所以我尝试使用不透明度和可见性

我有两个问题。首先，按钮中的文本没有居中，因为图标处于不可见状态，但是当您转到开发工具时，您仍然可以在那里看到它。其次，该图标不会出现在悬停上

.btn{
文本转换：大写；
文字装饰：无；
填充：1.5雷姆4雷姆；
显示：内联块；
字体大小：1.6rem；
框阴影：0 1rem 2rem rgba（$color black，.2）；
&--初级的{
背景色：$原色；
颜色：$白色；
过渡：all.2s；
&__图标{
可见性：隐藏；
不透明度：0；
}
&：悬停{
transform:translateY（-2px）；
&__图标{
能见度：可见；
不透明度：1；
}
}
}
}

---

我认为问题在于，您的图标以零内容内联显示。我认为您可能需要将图标更改为

display:inline block并给它一些维度。当图标不可见时，您需要将尺寸设置为
0px

我将您的代码从SCS转换为CSS，并将$variables替换为实际的CSS颜色，以生成一个工作片段


.btn{
文本转换：大写；
文字装饰：无；
填充：1.5雷姆4雷姆；
显示：内联块；
字体大小：1.6rem；
盒影：0 1rem 2rem rgba（0,0,0,2）；
宽度：240px；
}
.btn—主要{
背景色：红色；
颜色：白色；
过渡：all.2s；
}
.btn—主图标{
显示：内联块；
宽度：0px；
高度：0px；
可见性：隐藏；
不透明度：0；
}
.btn--主：悬停{
transform:translateY（-2px）；
}
.btn--主：hover.btn--主图标{
宽度：20px；
高度：20px；
背景颜色：蓝色；
能见度：可见；
不透明度：1；
}
你能在jsfiddle.netThanks上摆弄一下吗？有没有一种方法可以在按钮不变大的情况下添加图标？它可能延伸到右边固定的宽度？