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

Проблема заключается в том что при клике на .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);
}
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Лень компилировать всё это в мозгу. На будущее, делайте песочницы с видимой проблемой на codepen.io.

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

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

Итого: можно сократить огромный кусок мусора, избавиться от трансформаций и абсолюта.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rqdkmndh
@rqdkmndh
Web-разработчик
может вот так попробовать:
.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;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы