Why does my ::before element only display if I use position absolute?

Question

I have a simple question that I can't seem to find the answer to, and it may be that I'm just not entering the correct search terms into Google, but after scratching my head while trying to gain a better understanding of this, I still turn up empty handed.

I have a span element, that has a ::before pseudo-element, nothing special, just a simple circle. However, I noticed that I have to absolutely position the pseudo-element in order for it to be visible. I found this rather odd and am not sure if I just don't fully understand pseudo-elements of this nature, or if I'm incorrectly implementing the idea.

Either way, here is an example with and without the absolute positioning.

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  margin-bottom: 15px;
}

.no-absolute::before,
.absolute::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
}

.absolute {
  position: relative;
}

.absolute::before {
  position: absolute;
  top: 4px;
  left: -15px;
}

<span class="no-absolute">No Absolute</span>
<span class="absolute">Absolute</span>

Why does my ::before pseudo-element have to be absolutely positioned in order to be visible?

@HarunYilmaz the `::before` pseudo-class already has `content: '';`. — Hazel へいぜる, Sep 24 '19 at 14:28
because you cannot set height to inline element and position absolute force the display to block — Temani Afif, Sep 24 '19 at 14:31

score 2 · Accepted Answer · answered Sep 24 '19 at 14:29

2

You don't need to have absolute positioning. You just need to set display property for the ::before pseudo-element

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  margin-bottom: 15px;
}

.no-absolute::before{
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
}

<span class="no-absolute">No Absolute</span

answered Sep 24 '19 at 14:29

joshua miller

1,686
1
13
22

That was fast! Can you give an explanation for future readers as to why this is the case? I'd assume it's because the DOM doesn't know how to display the element without explicitly being told, but that's just an educated guess. Thanks for pointing that out! Also, can't accept for 6 more minutes. +1 – Hazel へいぜる Sep 24 '19 at 14:31
pseudo-elements are given the 'initial' display property by default, which means 'inline'. In your case, you need to change the display property to 'inline-block' or 'block' in order to be able to make changes on a block level – joshua miller Sep 24 '19 at 14:40

score 2 · Answer 2 · answered Sep 24 '19 at 14:30

Your pseudo element needs a display property. I've added display: block.

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  margin-bottom: 15px;
  position: relative;
}

.no-absolute::before,
.absolute::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
  display: block;
}

.absolute {
  position: relative;
}

.absolute::before {
  position: absolute;
  top: 4px;
  left: -15px;
}

<span class="no-absolute">No Absolute</span>
<span class="absolute">Absolute</span>

score 2 · Answer 3 · answered Sep 24 '19 at 14:31

The answer is: you need display to give the pseudo-element size / shape (either block or inline-block). inline elements do not accept width / height.

ALTERNATIVELY you could do it with padding to give it size / shape, but display with width / height makes the most sense.

span {
  margin-bottom: 15px;
  position: relative;
}

.no-absolute::before,
.absolute::before {
display: block;
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
}

<span class="absolute">Absolute</span>

Why does my ::before element only display if I use position absolute?

3 Answers3