Make a Square Pseudo Element Only using Padding - html

Question

Why isn't a pseudo element with equal padding on all sides a square?
I am only able to achieve a square pseudo element when the right/left padding is 1.5 times that of the top/bottom padding.
See code below.
button{
width: 200px;
height: 100px;
background: gray;
border:none;
font-size:16px;
}
.icon::before {
// position: relative;
padding: 20px;
content: "";
background: black;
}
.icon2::before {
padding: 20px 30px;
content: "";
background: black;
}
<p>Pseudo element: padding on all sides is 20px.</p>
<button class="icon">
Click Me
</button>
<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p>
<button class="icon2">
Click Me
</button>

Answer 1

Because it is treated as an inline element by default and the font-size will impact the size of the element. Change font-size: 0; or add display: block; with a matching height/width and it will be a square.
button{
width: 200px;
height: 100px;
background: gray;
border:none;
font-size:16px;
}
.icon::before {
// position: relative;
padding: 20px;
content: "";
background: black;
display: block;
width: 0;
height: 0;
}
.icon2::before {
padding: 20px;
content: "";
background: black;
font-size: 0;
}
<p>Pseudo element: padding on all sides is 20px.</p>
<button class="icon">
Click Me
</button>
<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p>
<button class="icon2">
Click Me
</button>

Answer 2

See Michael's answer for an answer to the why in your question.
I would just like to point out, that most of the time the answer to your title is to use the fact that percentage padding is relative to the width of the thing. Yes, width, not height. I.e. you can add padding-bottom: 100% to achieve a square. Or make that 62.5% to achieve a 16:9 ratio e.g. for videos.
.square {
width: 100px;
}
.square::before {
display: block;
content: '';
padding-bottom: 100%;
border: 1px solid red;
}
<div class="square"></div>

Answer 3

generated content inherits font-size and its line-height from parent.
You can reset font-size to hide both or only line-height.
button{
width: 200px;
height: 100px;
background: gray;
border:none;
font-size:16px;
}
.icon::before {
font-size:0;/* remove space used from inserted text and line-height*/
padding: 10%;/* 10% of 200px width is 20px */
vertical-align:middle;/* can be usefull;*/
margin-right:0.25rem;/* keep away from next phrasing content */
content: "";
background: black;
}
.icon2::before {
padding: 20px 30px;
content: "";
background: black;
}
<p>Pseudo element: padding on all sides is 20px.</p>
<button class="icon">
Click Me
</button>
<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p>
<button class="icon2">
Click Me
</button>