pseudo-elements display: block vs display: inline

user_5605450 0
Viewed 756

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

enter image description here

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

enter image description here

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

css html
2 Answers

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.

user_13522880

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>

user_115063810
Related