How to draw a square inside a div

Question

I have an image and i want to make a square inside it, however it draws a rectangle.

p::after { 
  content: "";
  background-color: red;
  padding: 5px;
  /*line-height: 0px;*/
}

<p>That is not a square -&gt;</p>

Answer 1

display:inline-block will solve the problem

p::after { 
  content: "";
  display:inline-block;
  background-color: red;
  padding: 5px;
  /*line-height: 0px;*/
}

<p>That is a square -&gt;</p>