:after adjust height of parent - html

Question

I have a progress bar, and I am trying to adjust the height of the parent item based on the content of the :after pseudo element. Once you run the code, you will see that the 30% is partially inside the div.
Is there a way for me to adjust the height of the element that the :after is attached to?
I tried changing the display property of the :after item but that didn't do anything.
.pure-progress {
display: block;
position: relative;
width: 100%;
min-height: 10px;
}
.pure-progress>.pure-progress--bar {
position: absolute;
background-color: blue;
height: 100%;
transition: width 200ms ease-in-out;
}
.pure-progress:after {
position: absolute;
height: inherit;
line-height: 1.8rem;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
<div class="pure-progress" data-progress="30%">
<div class="pure-progress--bar" style="width:30%"></div>
</div>

Answer 1

You can change absolute to relative and add display: block - see demo below:
.pure-progress {
display: block;
position: relative;
width: 100%;
min-height: 10px;
}
.pure-progress>.pure-progress--bar {
position: absolute;
background-color: blue;
height: 100%;
transition: width 200ms ease-in-out;
}
.pure-progress:after {
/*position: absolute;*/
position: relative; /* ADDED */
display: block; /* ADDED */
height: inherit;
line-height: 1.8rem;
/*
left: 0;
right: 0;
top: 0;
bottom: 0;
*/
margin: auto;
width: 100%;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
<div class="pure-progress" data-progress="30%">
<div class="pure-progress--bar" style="width:30%"></div>
</div>

Answer 2

You can update the css of .pure-progress:after to
.pure-progress:after {
display: block;
height: inherit;
line-height: 1.8rem;
margin: auto;
width: 100%;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
demo
Update
My answer does not work when the progress bar is overlapping the content text. Therefore it is necessary to position it using position: relative as suggested by kukkuz
The updated styles look like:
.pure-progress:after {
position: relative;
display: block;
height: inherit;
line-height: 1.8rem;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
Updated demo