Css 在IE11中使用：after和：hover:after按钮

我有一个使用：after和：hover:after CSS设置动画的按钮。尝试了许多方法让它在IE中工作，但找不到解决方法。可能是因为空内容：“”或转换，但即使没有转换也无法工作。非常感谢您的帮助/解释

button.bttnStyle1{
背景：无；
边界：无；
字号：14rem；
文本转换：大写；
位置：相对位置；
填充：0rem；
光标：指针；
}
按钮。bttnStyle1:之后，
button.bttnStyle1:：after{
显示：块；
位置：绝对位置；
左：0；
底部：-5雷姆；
宽度：3rem；
高度：3雷姆；
边界半径：3rem；
内容：“；
-o型过渡：宽0.4s缓动，高2s缓动；
-moz过渡：宽0.4s缓变，高2s缓变；
-webkit过渡：宽0.4s缓动，高2s缓动；
过渡：宽0.4s缓和，高2s缓和；
}
button.bttnStyle1:悬停{}
button.bttnStyle1:hover:after，
bttnStyle1:hover:：after{
宽度：100%；
高度：2em；
-o型过渡：宽0.4s缓动，高2s缓动；
-moz过渡：宽0.4s缓变，高2s缓变；
-webkit过渡：宽0.4s缓动，高2s缓动；
过渡：宽0.4s缓，高0.2s缓；
}
按钮。bttnStyle1：焦点{
大纲：无；
}
button.bttnColorGreen{
颜色：#69e0b1；
}
按钮。bttnColorGreen:之后{
背景色：#69e0b1；
}

按钮

孤子：

CSS边界半径需要定义实际边界。溢出也需要是可见的，并且一切正常

button.bttnStyle1:after,
button.bttnStyle1::after {
    display: block;
    position: absolute;
    left: 0;
    bottom: -5rem;
    width: 0rem;
    height: 0rem;
    line-height:0;
    border-radius:1rem;
    content: "";
    -o-transition: width 0.4s ease, height 2s ease-out;
    -moz-transition: width 0.4s ease, height 2s ease-out;
    -webkit-transition: width 0.4s ease, height 2s ease-out;
    transition: width 0.4s ease, height 2s ease-out;
}

button.bttnColorGreen:after,
button.bttnColorGreen::after{
    border:1rem solid #69e0b1;
    background-color:#69e0b1;
}

---

添加

溢出：可见到您的
按钮
。找到了这个解决方案