Archived topic
CSS ::after / ::before applying to the wrong element
5 replies · Started by Samantha on October 5, 2021
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?
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 😂
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. :)
Thank you, will do!
You guys are so the best 😊
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 😊
Nice one! thanks for sharing it with us. :D
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. :)
