html - 将伪元素的实际内容居中，而不是伪元素本身

问题描述

这可能吗？如何获取伪元素中心的内容，而不是实际的伪元素本身。我在需要居中的单选按钮上有黑色背景。

请参见下面的示例：

.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>

content:''文本偏右，但如果你和相应的position: absolute样式它会影响整个事情，而不仅仅是文本

如何将文本居中：在伪元素之前？

这个答案和许多其他人喜欢它的问题：

最好的办法是使用流行的居中技术相对于跨度绝对定位之前的伪元素：

这并没有解决实际的文本。

你如何定位伪元素文本？还是不可能？如果是这样，我该怎么做？

标签： htmlcss

html - 将伪元素的实际内容居中，而不是伪元素本身

问题描述

解决方案

推荐阅读