center the actual content of a pseudo element, not the pseudo element itself

Question

Is this possible? How can I get the content of a psueudoelement center, not the actual pseudo element itself. I have a black background over a radio button that needs to be centered.

See the example below:

.sizeguide-radio {
    width: 3.125rem;
    height: 3.125rem;
}

.sizeguide-radio:checked:after {
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background-color: black;
    color: #fff;
    border-radius: 100%;
}

.sizeguide-radio__size:nth-of-type(1):after {
    content: '32' !important;
    color: #fff !important;
}
    
.sizeguide-radio__size:nth-of-type(2):after {
    content: '34' !important;
    color: #fff !important;
}
    
.sizeguide-radio__size:nth-of-type(3):after {
    content: '36' !important;
    color: #fff !important;
}
    
.sizeguide-radio__size:nth-of-type(4):after {
    content: '38' !important;
    color: #fff !important;
}
    
    
.sizeguide-radio__letter:nth-of-type(1):after {
    content: 'A' !important;
    color: #fff !important;
}
    
.sizeguide-radio__letter:nth-of-type(2):after {
    content: 'B' !important;
    color: #fff !important;
}
    
        .sizeguide-radio__letter:nth-of-type(3):after {
            content: 'C' !important;
            color: #fff !important;
        }
    
        .sizeguide-radio__letter:nth-of-type(4):after {
            content: 'D' !important;
            color: #fff !important;
        }
    
        .sizeguide-radio__letter:nth-of-type(5):after {
            content: 'DD' !important;
            color: #fff !important;
        }
    
label {
display: none;
}

<div class="sizeguide-band-sizes">
            <input class="sizeguide-radio sizeguide-radio__size" type="radio" id="32" name="band-size" value="32">
            <label for="32">32</label>
            <input class="sizeguide-radio sizeguide-radio__size" type="radio" id="34" name="band-size" value="34">
            <label for="32">34</label>
            <input class="sizeguide-radio sizeguide-radio__size" type="radio" id="36" name="band-size" value="36">
            <label for="32">36</label>
            <input class="sizeguide-radio sizeguide-radio__size" type="radio" id="38" name="band-size" value="38">
            <label for="32">38</label>
</div>


<div class="sizeguide-band-sizes">
            <input class="sizeguide-radio sizeguide-radio__letter" type="radio" id="A" name="cup-size" value="1">
            <label for="32">A</label>
            <input class="sizeguide-radio sizeguide-radio__letter" type="radio" id="B" name="cup-size" value="1/2">
            <label for="32">B</label>
            <input class="sizeguide-radio sizeguide-radio__letter" type="radio" id="C" name="cup-size" value="2/3">
            <label for="32">C</label>
            <input class="sizeguide-radio sizeguide-radio__letter" type="radio" id="D" name="cup-size" value="3">
            <label for="32">D</label>
            <input class="sizeguide-radio sizeguide-radio__letter" type="radio" id="DD" name="cup-size" value="4">
            <label for="32">DD</label>
            <div>Your size is: <span id="sizeguide-calculated-size">3</span></div>
        </div>

The content:'' text is off up to the right, but if you position: absolute and style accordingly it effects the whole thing, not just the text

How to center text inside :before pseudo element?

The problem with this answer and many others like it:

The best thing would be to position the before pseudo element absolutely with respect to the span using the popular centering technique:

This doesn't address the actual text.

How do you position pseudo element text? Or is it impossible? If so, how should I do this?

Answer 1

Try to add these lines to your CSS

.sizeguide-radio__size:after,
.sizeguide-radio__letter:after{
  display: flex !important;
  justify-content: center;
  align-items: center;
}