Is there a way of removing an element from a center calculation - html

Question

So, I am building a banner, the content needs to be responsive.
I am using flex with center. But the issue is the dollar amount needs to be centered and not the $+dollar amount.
I have tackled this with a negative margin, but it is clunky. I was wondering is the was a way to mark the $ as not included in the center calculation.
.flex-center {
padding: 3rem;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.offer {
font-size: 3rem;
font-weight: bold;
}
.offer sup {
font-size: 2rem;
}
<div class="flex-center">
<div>Some normal text</div>
<div class="offer"><sup>$</sup>250</div>
<div>Text</div>
</div>

Answer 1

If you meant to exclude the $ sign away from the document flow so that only the price tag width was considered for centering, one solution could be:
Remove the <sup> element entirely
Make the container position:relative
make a new css rule adding the pseudo element ::before positioned absolute to show the $ sign using the content css property
EDIT: As #TemaniAfif suggested in comments, I replaced the fixed left
offset with the right offset set as 100%
This is a demo:
.flex-center {
padding: 3rem;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.offer {
position: relative;
font-size: 3rem;
font-weight: bold;
}
.offer::before {
content: '$';
font-size: 2rem;
position: absolute;
/*left: -1.25rem;*/
right: 100%;
}
<div class="flex-center">
<div>Some normal text</div>
<div class="offer">250</div>
<div>Text</div>
</div>