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

Question

[Дмитрий Ярощук]

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

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

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

Answer 1

[Ankhena]

Лень компилировать всё это в мозгу. На будущее, делайте песочницы с видимой проблемой на codepen.io.

Но вы же переопределили transform.
Пока scale(0) он по центру, потому что есть translate, а при scale(1) никакого translate уже нет.

Что имеет смысл сделать:
1. Большинство современных браузеров позволяет стилизовать радио и чекбоксы с помощью appearance, без вот этой дичи со спанами.
2. Если всё таки спан, то для серого фона нет смысла делать псевдо, можно покрасить сам span.
3. + лучше делать фоном (или маской), а не в content, будет легче управлять. Опять же, шрифт в content может сбивать центрирование, потому что так нарисован символ.
4. after не вешать абсолютом, а разместить в центр, например, флексом.
5. Либо вообще не делать after, а регулировать bg size (mask size) для появления крестика.

Итого: можно сократить огромный кусок мусора, избавиться от трансформаций и абсолюта.

Comments

[Дмитрий Ярощук]

Ankhena спасибо за ответ, очень помогло :)

Answer 2

[Антон Горецкий]

может вот так попробовать:

.todo-item__span::after {
    position: absolute;
    content: '+';    
    display: inline-block;
    transition: 0.4s ease-in;
    transform: scale(0) translate(-50%, -50%);
    background-color: transparent;
    font-size: 2rem;
}

Comments

[Ankhena]

Так не поможет, можете сами попробовать ;)

[Антон Горецкий]

Ankhena, как раз прекрасно работает! Проверил.

[Ankhena]

Антон Горецкий, да, псевдо ужатый в ноль будет по центру. Но при ховере нет. У меня в ответе подробно написано, почему.