How can I blur text in a square using pseudo selectors? - html

Question

I want to add blur behind text up to some amount of padding. I don't want some div behind and blur the div, I want it to be bound to the text.
Here is my attempt:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.image {
z-index: -1;
object-fit: cover;
}
.text {
z-index: 2;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
}
.text::before {
content: "";
position: absolute;
z-index: 1;
top: -5px;
bottom: -5px;
left: -15px;
right: -15px;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<img class="image" src="https://source.unsplash.com/random" />
<h1 class="text">Example Text</h1>
</div>
I am getting like this:
I want the edges to be not blurred.
I want something like below:

Answer 1

You can consider overflow:hidden to stop the blur effect and have a sharpe edge. I also considered padding instead of adjusting top/left/right/bottom:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.text {
z-index: 1;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
padding: 12px 22px; /*added this*/
overflow: hidden; /*added this*/
}
.text::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<h1 class="text">Example Text</h1>
</div>