[Resolved] CSS ::after / ::before applying to the wrong element

[Samantha]

hi,

I think I’m going mad. I’m trying to apply a floating shadow to the .gb-button element, by using the ::after pseudoelement, however no matter what I do the pseudoelement seems to be applying to the child .gb-icon class 🤔

the CSS I’m trying to apply to .gb-button is:

.gb-button::after{
	content: "";
	position: absolute;
	bottom: -35px;
	background: #00bfdd;
	transform: scaleY(0.2);
	width: 90%;
	height: 30px;
	left: 5%;
	border-radius: 50%;
	filter: blur(10px);
}

similarly if I apply the above to .gb-button-wrapper, the floating shadow appears on .gb-button, but of course it’s much wider than the button because the wrapper fills the width of its parent grid, and flex-stretch: 2; doesn’t help.

I know the pseudoelement can’t appear outside the bounds of the flex-box, but I can’t think of a way to do this within the flex button layout of GP.

(the floating shadow is supposed to be underneath the rounded buttons, however it’s appearing under the down arrows – completely the wrong element)

what am I missing?

[Samantha]

I think I just solved it. mostly…

change .gb-button-wrapper to display: inline-flex;, and apply the :after pseudoelement to apply to .gb-button-wrapper and add justify-content: center;

phew!

thank you 😂

[Elvin]

Hi Samantha,

Thanks for letting us know. Glad you got it sorted.

Reminder: Make sure you check it on all viewports. To make sure it’s working on all devices. 🙂

[Samantha]

Thank you, will do!

You guys are so the best 😊

[Samantha]

P.P.S for anyone reading this, I ended up using display: grid; to .gb-button-wrapper achieve the floating button shadow. So the full solution was:

.gp-button-wrapper {
	display: grid;
}

.gb-button::after {
	content: "";
	background: #00000011;		/* mostly transparent */
	margin-top: 6px;
	height: 30px;
	border-radius: 50%;
	width: 90%;
	margin-left: 5%;
	transform: scaleY(0.2);
}

nice and tidy 😊

[Elvin]

Nice one! thanks for sharing it with us. 😀

Tip: Consider assigning an ID or unique class to the button so you can use it as the CSS selector. .gb-button may be too generic. The CSS will apply to ALL generateblocks buttons throughout the page and that maybe undesirable. 🙂

[Author]

Posts