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

Jamie40
Tourist
4 0 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;
}

Reply 1 (1)

User02
Visitor
1 0 0

I have the same exact issue. Won't let me save unless I remove "content" element.