Why can't I save CSS content element overlaying an image?

Store Design
1

I’m trying to add content overlaying an image.

I see it perfectly in the preview but it won’t let me save it. When I remove the content: “Text here”; part, it lets me save. But won’t let me save with the content element. Any one know why?

Thanks,

This is the code.:

.image–container::after {
content: “Text here”;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(rgba(148, 15, 75, 0.3), rgba(148, 15, 75, 0.3));
color: white;
padding: 10px;
font-size: 30px;
text-align: center;
white-space: nowrap;
font-weight: bold;
font-family: Avenir, sans-serif;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
height: auto;
}

2

I have the same exact issue. Won’t let me save unless I remove “content” element.