Question

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

我想创建一个登录表单，其输入类型为checkbox。我使用以下代码（这是.scss代码）删除了checkbox的常规样式：

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;
}

我还使用伪元素使用::before和::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;
}

使用伪元素水平居中输入

0 个答案: