pseudo-elements display: block vs display: inline

Question

I am currently practicing CSS by following along with a Youtube tutorial by freecodecamp.org

My code is as follows:

p::before{
  content: "hello ";
  color: white;
  font-size: 60px;
  background: salmon;
  margin-bottom: 20px;
}

p::after{
  display: block;
  content: "";
  height: 100px;
  width: 100px;
  background: green;
}

<p>Before and after pseudo elements</p>

Now when I specify display: block in the p:: after pseudo-selector I am getting the expected output as follows

but when I omit the display: block property, the green box just disappears as below:

Does someone have an appropriate explanation for why this happens? What I was expecting was that the box will still be shown inline after the 'hello before and after pseudo-elements' but it is disappearing altogether...

Thanks in Advance for the help.

Kind Regards, Sohaib

score 3 · Accepted Answer · answered Jul 04 '20 at 10:12

3

Then use display: inline-block

Elements with display: inline can't have explicit dimensions set on them - it will have no effect. And so, because the pseudo element has no non-empty content, it will appear with 0 dimensions and thus invisible.

answered Jul 04 '20 at 10:12

Mitya

33,629
9
60
107

1

Thanks for this! Clear and concise! :) – Sohaib Furqan Jul 04 '20 at 14:28

score 0 · Answer 2 · answered Jul 04 '20 at 10:13

Add display: inline-block; to your CSS

p::before{
  content: "hello ";
  color: white;
  font-size: 60px;
  background: salmon;
  margin-bottom: 20px;
}

p::after{
  display: inline-block;
  content: "";
  height: 100px;
  width: 100px;
  background: green;
}

<p>Before and after pseudo elements</p>

pseudo-elements display: block vs display: inline

2 Answers2