The very simple mistake that is in your CSS

If you add display: block to elements with position: absolute or position: fixed, please, you shouldn't do that. Browsers always use block values by default.

Besides, the inline or inline-block value will be changed to block, inline-flex -> flex, inline-grid -> grid, and inline-table -> table.

don't do this

.example::before {  content: "";  display: block;  position: absolute;   /* or  position: fixed;  */ }

you can use this instead

.example::before {  content: "";  position: absolute;   /* or  position: fixed;  */ }

P.S.
If you want to be first who take my tips get my paid subscription on Patreon

Also I make written CSS/HTML code review so that you don't make common mistakes. If you're interested in that chat me on [email protected] or dev.to direct.

Make a gift yourself or friends who like frontends: T-Shirt, Stickers, Masks, Magnets

P.S.S. This post was written with the support of my sponsors: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.