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

**URL:** <https://forum.freecodecamp.org/t/why-does-before-and-after-display-only-under-position-absolute/175037>\
**Category:** General\
**Created:** [February 17, 2018, 12:12am UTC](https://forum.freecodecamp.org/t/why-does-before-and-after-display-only-under-position-absolute/175037 "2018-02-17T00:12:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hadrienallemon](https://avatars.discourse-cdn.com/v4/letter/h/4491bb/32.png) [@hadrienallemon](https://forum.freecodecamp.org/u/hadrienallemon)\
**Post date:** [February 17, 2018, 12:12am UTC](https://forum.freecodecamp.org/t/why-does-before-and-after-display-only-under-position-absolute/175037/1 "2018-02-17T00:12:14Z")

</div>

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](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 !

---

<div class="post-metadata">

**Author:** ![pseudop](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pseudop/32/65729_2.png) [@pseudop](https://forum.freecodecamp.org/u/pseudop)\
**Post date:** [February 18, 2018, 6:19am UTC](https://forum.freecodecamp.org/t/why-does-before-and-after-display-only-under-position-absolute/175037/2 "2018-02-18T06:19:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:26pm UTC](https://forum.freecodecamp.org/t/why-does-before-and-after-display-only-under-position-absolute/175037/3 "2021-01-17T20:26:39Z")

</div>

Closed on January 17, 2021, 8:26pm UTC