html - 带有伪元素的水平居中输入

Question

我在这个论坛上搜索了很多这个问题，但似乎还没有答案。

我想创建一个居中输入类型的登录表单checkbox。我删除了checkbox使用此代码的正常样式（它是 .scss 代码）：

input[type=checkbox] {
margin: auto;
margin-bottom: $fs-h2;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: $fs-h3;
height: $fs-h3;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}

而且我还使用伪元素来分配我自己的样式，使用::beforeand ::after。

现在的问题是，checkbox没有居中，因为::after伪元素有一个文本作为内容，它很长并且使用white-space: nowrap; 在一条线上。

在“父”元素上使用翻译时是否有可能包含伪元素宽度？

这是伪元素的代码：

input[type=checkbox]::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid $clr-LightBlue;
    border-radius: 0.2rem; 
    transition: all 0.2s ease;
}

input[type=checkbox]::after {
    content: 'Benutzerdaten speichern';
    position: absolute;
    color: $clr-LightBlue;
    font-size: $fs-default;
    line-height: $fs-default;
    transform: translate(25%,25%);
    white-space: nowrap;
    transition: all 0.2s ease;
}

标签： htmlcss