Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

Question

Проблема заключается в том что при клике на .todo-item__span::before элемент .todo-item__span::after появляется в нижнем правом углу, а должен по середине.

.todo-item__container-field {
    display: flex;
    justify-content: center;
    align-items: center;
}
.todo-item__span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.todo-item__span::before {
    content: '';
    width: 25px;
    height: 25px;
    background-color: #cdd1d1;
    border-radius: 3px;
}
.todo-item__span::after {
    display: inline-block;
    transition: 0.4s ease-in;
    content: '+';
    width: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(0) translate(-50%, -50%);
    background-color: transparent;
    border-radius: 3px;
}
.todo-item__checkbox {
    display: none;
}
.todo-item__checkbox:checked + .todo-item__span::after {
    transform: scale(1);
}

<label class='todo-item__container-field'>
            <input class='todo-item__checkbox' type='checkbox' name='checkbox'/>
            <span class='todo-item__span'></span>
        </label>

Answer 1

По крайней мере, у меня работает так:

.todo-item__container-field {
    display: flex;
    justify-content: center;
    align-items: center;
}
.todo-item__span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.todo-item__span::before {
    content: '';
    width: 25px;
    height: 25px;
    background-color: #cdd1d1;
    border-radius: 3px;
}
.todo-item__span::after {
    /* Если вы не добавите следующие три свойства, то у вас будет не по центру, но и не внизу справа */
    display: flex; /* display должен быть не inline-block, а flex */
    justify-content: center; /* тут нужно добавить это свойство */
    align-items: center; /* и тут нужно добавить это свойство */
    transition: 0.4s ease-in;
    content: '+';
    width: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(0) translate(-50%, -50%);
    background-color: transparent;
    border-radius: 3px;
}
.todo-item__checkbox {
    display: none;
}
.todo-item__checkbox:checked + .todo-item__span::after {
    transform: scale(1) translate(-50%, -50%); /* Также тут нужно добавить translate(), для того, чтобы это значение не перезатиралось */
}

<label class='todo-item__container-field'>
            <input class='todo-item__checkbox' type='checkbox' name='checkbox'/>
            <span class='todo-item__span'></span>
        </label>

Рядом с теми свойствами, которые изменились или добавились, я добавил комментарии.

БЛОГ НА HUSL

Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

Ответы (1 шт):