Why does :before and :after display only under position:absolute?

General
1

Hey there fellow campers. I recently tried to use :before and :after to create shapes with css but I had some little troubles :

Whatever I do, when creating shape, the only position I can use is “absolute” which isn’t really convinient since I have to position it manually everytime.

As illustred in this codepen : https://codepen.io/Hadrienallemon/pen/LQeNyZ, when I try to make a cross out of css, I cannot use position:relative. However if you cange the display to absolute it does work.

Has someone any idea about what i’m doing wrong ? Any help would be greatly appreciated !

Thanks a lot !

2

hello hadrienallemon,

when I try to make a cross out of css, I cannot use position:relative

you can use relative postion. the problem why your cross doesn’t appear is that you declared width and height but it won’t work unless you display it block or something else.

the only position I can use is “absolute” which isn’t really convinient since I have to position it manually everytime

also, it doesn’t mean that you don’t have to position it manually when its position is set to relative.