CSS ::after / ::before applying to the wrong element

This topic has 5 replies, 2 voices, and was last updated 3 years, 11 months ago by Elvin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 5, 2021 at 8:32 pm #1954131
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?
October 5, 2021 at 8:37 pm #1954134

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 😂

October 5, 2021 at 8:50 pm #1954138

Elvin
Staff
Customer Support

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. 🙂

October 7, 2021 at 8:34 pm #1956622

Samantha

Thank you, will do!

You guys are so the best 😊

October 7, 2021 at 8:40 pm #1956624
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 😊
October 7, 2021 at 9:05 pm #1956637

Elvin
Staff
Customer Support

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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

Popular Articles

Start building better websites today.