Css ：after和：before元素在透明边框下不可见

我正在尝试动画：after anf:before元素，这些元素将被放置在div边框下。下面的代码片段演示了工作情况，但如果我取消注释

border:2px solid transparent，伪元素变为不可见。
我试着改变盒子的尺寸——没关系

问题是：为什么透明边界表现为不透明


.ex{
位置：相对位置；
框大小：边框框；
宽度：100px；
高度：40px；
线高：2米；
文本对齐：居中；
背景颜色：浅绿色；
/*边框：2倍实心透明*/
利润率：30像素；
}
.ex:：之后，.ex:：之前{
内容：“；
z指数：-1；
显示：块；
位置：绝对位置；
宽度：0；
身高：0；
背景：红色；
过渡：所有。2轻松；
}
例：以前{
顶部：-2px；
左：-2px；
}
例如：之后{
底部：-2px；
右：-2px；
}
.ex:hover:：after，.ex:hover:：before{
宽度：计算（100%+4px）；
高度：计算（100%+4px）；
}
将鼠标悬停在我身上
为什么会发生这种情况？

实际上，透明边框下方的区域由浏览器使用背景色绘制

如何修复？：

使用
background clip
css属性明确告诉浏览器，当
background color
属性应用于元素时，仅绘制元素的内容区域（不包括边框）

.ex {
  background-clip: content-box;
  border: 2px solid transparent;
}

关于
背景剪辑
：

演示：


.ex{
位置：相对位置；
框大小：边框框；
宽度：100px；
高度：40px；
线高：2米；
文本对齐：居中；
背景颜色：浅绿色；
边框：2倍实心透明；
背景剪辑：内容框；
利润率：30像素；
}
.ex:：之后，.ex:：之前{
内容：“；
z指数：-1；
显示：块；
位置：绝对位置；
宽度：0；
身高：0；
背景：红色；
过渡：所有。2轻松；
}
例：以前{
顶部：-2px；
左：-2px；
}
例如：之后{
底部：-2px；
右：-2px；
}
.ex:hover:：after，.ex:hover:：before{
宽度：计算（100%+4px）；
高度：计算（100%+4px）；
}
将鼠标悬停在我身上