Controlling dimensions of ::after - css

Question

I've created a navigation using the CSS below to achieve equal distance between the nav elements. However, I've run into an issue where the ::after element creates empty space below the list area, the height of which I cannot seem to adjust.
See this image:
Rendered List with wasted space
ul.formnav {
padding: 0px 8%;
justify-content: space-between;
text-align: justify;
}
ul.formnav::after {
background-color: red;
content: 'This is wasted Space';
display: inline-block;
width: 100%;
height
}
ul.formnav li {
display: inline-block;
color: #FFF;
background-color: #999; /*Circle Formatting*/
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
}
<div>
<ul class="formnav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
I can adjust the contents themselves, e.g. I can set height:0px and the red background will disappear or simply set content:''; but the space taken up by the ::after element remains unchanged. Any idea how to fix this without dropping display:inline-block ? (can't use flexbox due to compatibility)

Answer 1

The extra white space that appears is due to the pseudo-element forming a line box in the new line, and the vertical spacing is the line leading divided above and below the baseline.
If you set line-height: 0 on the parent container and then vertical-align: top on the pseudo-element, this will get shrink the white space to zero height.
ul.formnav {
padding: 0px 8%;
justify-content: space-between;
text-align: justify;
border: 1px dotted blue; /* demo only */
line-height: 0;
}
ul.formnav::after {
content: '';
display: inline-block;
width: 100%;
vertical-align: top; /* gets rid of space below the baseline */
}
ul.formnav li {
display: inline-block;
color: #FFF;
background-color: #999; /*Circle Formatting*/
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
}
<div>
<ul class="formnav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

Answer 2

Or you could just use flexbox:
ul.formnav {
padding: 0px;
display: flex;
justify-content: space-between;
border: 1px solid grey;
}
ul.formnav li {
color: #FFF;
background-color: #999;
/*Circle Formatting*/
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
}
<div>
<ul class="formnav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>