如何用伪选择器实现文本后方带内边距的非边缘模糊效果？

嘿，我完全get到你的需求了——想给文本绑定一个带内边距的模糊背景，而且边缘得是干净清晰的，不能有那种模糊扩散出去的毛边对吧？你用伪元素实现的思路是对的，现在的问题出在filter: blur()会让伪元素的边缘也跟着模糊扩散，咱们只需要做一点点小调整就能完美解决。

解决思路 #

核心逻辑：把模糊效果限制在文本的内边距范围内，不让模糊溢出到外部。我们可以借助overflow: hidden来裁剪掉伪元素溢出的模糊部分，具体步骤如下：

• 给文本元素（.text）设置padding，这就是你想要的模糊背景的内边距大小，同时添加overflow: hidden，这样任何超出文本边界的内容都会被裁剪掉。
• 调整伪元素的尺寸，让它比文本的边界大出一个模糊半径的距离（比如你用了blur(10px)，就把伪元素的top/bottom/left/right各向外扩10px），确保模糊效果能完全覆盖文本的padding区域。
• 把伪元素的z-index设为-1，保证它在文本的后方，不会遮挡文字。

修改后的完整代码 #

HTML

<div class="container">
  <img class="image" src="https://source.unsplash.com/random" />
  <h1 class="text">Example Text</h1>
</div>

CSS

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.image {
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100%; /* 让图片填满整个容器 */
}
.text {
  z-index: 2;
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 36px;
  padding: 5px 15px; /* 自定义你想要的内边距 */
  overflow: hidden; /* 关键属性：裁剪溢出的模糊部分 */
}
.text::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px; /* 向外扩展模糊半径的距离，确保模糊覆盖padding */
  bottom: -10px;
  left: -10px;
  right: -10px;
  background-color: red;
  opacity: 0.4;
  filter: blur(10px);
}

效果说明 #

这样修改之后，模糊背景会完全贴合文本的内边距，边缘是清晰干净的——因为溢出的模糊部分被overflow: hidden裁剪掉了，完美实现了你要的「模糊效果与文本绑定，边缘无模糊」的需求，而且全程只用了伪元素，没有额外添加div元素。

内容的提问来源于stack exchange，提问作者Nihhaar