::before pseudo class applied to a text element within a grid causes issues

Support
#1

I have a text element, where I’ve attached a :before pseudo class to blur the background. This works fine for a headline, but I noticed that the same pseudo class on a text element when inside a grid will cause the entire cell to blur and not just the text background.

If I put a div in the cell, and then apply the pseudo class to either the div or the text element, it works as expected.

#2

Hey @dabigcheeze,

Thanks for reaching out!

Would you mind sharing the page URL so that we can check your setup properly? It would also be best to share a video or screenshot.

Thanks.

#3

It’s on a site with no public access at this point. Here’s the CSS, I just tested in on 3 other sites and it did the same thing.

.blur:before {
content: “”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: -1;
}

#4

Hello @dabigcheeze,

Please make sure that you only add the blur class to the Text or Headline element. If that does not work, you may want to update the CSS code to:

.x-text.blur:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	z-index: -1;
}

Be advised that custom conding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

#5

That isn’t the problem, and this does not resolve the issue. Did you even make an effort to test what I indicated as the situation? This isn’t custom coding, this is basic CSS and since you use custom CSS in many of your videos and within existing elements directly from your team this makes little sense. Please make the effort to test this as I had indicated and which is reproducible. As I indicated this is an obvious bug and not simply a specificity issue.

#6

Hello @dabigcheeze,

Actually, this isn’t an issue. Your custom CSS

.blur:before {
	content: "";
	position: absolute;
    /* the rest of your styling here */
}

is working as expected. It would be best to understand the Position property between the Text and Headline elements. The Text element is positioned as default or static. The Headline element is positioned as relative. Remember that .blue::before is positioned as absolute this is why it covers the whole column or cell. There is nothing wrong with the Cornerstone elements or your CSS code. You are just missing a piece of code. Now, to correct your code, you must set the position property to relative so that your .blur:before code will only affect the element that is applied to. Your custom CSS should be;

.blur {
  position: relative;
}

.blur:before {
	content: "";
	position: absolute;
    /* the rest of your styling here */
}

Hope this makes sense.

#7

Thank you!

#8

You are most welcome.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.