Html 后伪元素内容属性内的垂直居中文本

我正在尝试将文本垂直居中放置在我的

伪元素
的
内容
属性
之后。我搜索了一些答案，找到了属性
垂直对齐：基线和
显示：内联块，但它不起作用。我还尝试了
垂直对齐：中间和
垂直对齐：-50%
与
显示组合：块（也来自其他答案），但无法找出它不起作用的原因。目前，我的
“！”
位于底部，没有像我预期的那样垂直居中。有什么想法吗


.wrapper{
宽度：25px；
高度：25px；
边界半径：25px；
边框：1px实心#93B8C2；
填充物：5px；
位置：相对位置；
}
.wrapper：：之后{
内容：“！”；
宽度：10px；
高度：10px；
边界半径：10px；
背景:#DD3322；
显示：内联块；
颜色：白色；
文本对齐：居中；
位置：绝对位置；
右：0；
顶部：25px；
垂直对齐：基线；
填充：3倍；
}
找到了我自己的答案：我用flexbox属性解决了这个问题
显示：flex，
对齐项目：居中和
调整内容：中心
解决pseuo元素的垂直对齐问题。我还可以删除
文本对齐
和
垂直对齐
属性

下面的解决方案：


.wrapper{
宽度：25px；
高度：25px；
边界半径：25px；
边框：1px实心#93B8C2；
填充物：5px；
位置：相对位置；
}
.wrapper：：之后{
内容：“！”；
宽度：10px；
高度：10px；
边界半径：10px；
背景:#DD3322；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
位置：绝对位置；
右：0；
顶部：25px；
填充：3倍；
}
用我自己的方法解决了这个问题：解决方案如下。