Html 如何使用伪选择器模糊正方形中的文本？

我想在文本后面添加模糊，添加一些填充。我不希望后面有一些div并模糊div，我希望它绑定到文本

以下是我的尝试：

.container{
宽度：400px；
高度：200px；
位置：相对位置；
溢出：隐藏；
}
.形象{
z指数：-1；
对象匹配：覆盖；
}
.文本{
z指数：2；
位置：绝对位置；
宽度：自动；
底部：24px；
左：24px；
字体大小：36px；
}
.文本：：之前{
内容：“；
位置：绝对位置；
z指数：1；
顶部：-5px；
底部：-5px；
左：-15px；
右图：-15px；
背景色：红色；
不透明度：0.4；
过滤器：模糊（10px）；
}

示例文本
<代码> > p>可以考虑<代码>溢出：隐藏< /代码>以停止模糊效果并具有夏普边。我还考虑了填充，而不是调整上/左/右/下：


.container{
宽度：400px；
高度：200px；
位置：相对位置；
溢出：隐藏；
}
.文本{
z指数：1；
位置：绝对位置；
宽度：自动；
底部：24px；
左：24px；
字体大小：36px；
填充：12px 22px；/*添加了这个*/
溢出：隐藏；/*已添加此*/
}
.文本：：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
左：0；
右：0；
背景色：红色；
不透明度：0.4；
过滤器：模糊（10px）；
}

示例文本
这个问题很不清楚。在您的示例中，文本没有模糊。边缘不能模糊，这意味着什么？我的意思是模糊部分和背景图像之间应该有一个尖锐的分离（边缘）。我不知道如何表达，请建议改进。@ekad问题中有什么不清楚？考虑到已经有一个被接受的答案，我们进行了编辑以澄清它。@AlFoѫceѫ问题中有什么不清楚？考虑到已经有一个公认的答案，我们进行了编辑以澄清它。只需在此添加：变换：缩放（1.1）到模糊部分，这是一个巨大的改进。不知道为什么。@Nihhaar你只是把模糊的部分做得更大了，但保持了溢流箱和我得到的一样。由于高斯模糊在边缘（~0斜率）非常弱，我将其放大以使其更均匀。为什么在元素淡出文本之前，z索引：0 in：：也会淡出文本？因为在父元素中z-index是1，所以应该不会有问题？父元素的z-index不起作用，可以是任何值。伪元素和文本都堆叠在父元素内。如果将z-index:0或正值保留在它将在文本上方绘制的伪元素上，则需要在下面绘制负值。详情如下：