Почему псевдо элемент(.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> |
<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); } |
.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); }
Дополнительно:
Лень компилировать всё это в мозгу. На будущее, делайте песочницы с видимой проблемой на codepen.io.
Но вы же переопределили transform.
Пока scale(0) он по центру, потому что есть translate, а при scale(1) никакого translate уже нет.
Что имеет смысл сделать:
1. Большинство современных браузеров позволяет стилизовать радио и чекбоксы с помощью appearance, без вот этой дичи со спанами.
2. Если всё таки спан, то для серого фона нет смысла делать псевдо, можно покрасить сам span.
3. + лучше делать фоном (или маской), а не в content, будет легче управлять. Опять же, шрифт в content может сбивать центрирование, потому что так нарисован символ.
4. after не вешать абсолютом, а разместить в центр, например, флексом.
5. Либо вообще не делать after, а регулировать bg size (mask size) для появления крестика.
Итого: можно сократить огромный кусок мусора, избавиться от трансформаций и абсолюта.
- Ankhena спасибо за ответ, очень помогло :)
Ответы:
может вот так попробовать:
.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; } |
.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; }
- Так не поможет, можете сами попробовать ;)
- Ankhena, как раз прекрасно работает! Проверил.
- Антон Горецкий, да, псевдо ужатый в ноль будет по центру. Но при ховере нет. У меня в ответе подробно написано, почему.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того, чтобы псевдоэлемент появлялся по середине элемента .todo-item__span, необходимо правильно задать стили для выравнивания. Обычно, чтобы позиционировать псевдоэлемент по центру относительно родительского элемента, следует использовать свойство transform с значением translateX(-50%) и translateY(-50%) в комбинации с позиционированием абсолютно.
Пример кода на языке CSS:
.todo-item__span { position: relative; } .todo-item__span::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Далее идут остальные стили для псевдоэлемента */ }
Таким образом, указав позиционирование для родительского элемента как relative, а для псевдоэлемента как absolute с использованием transform, вы сможете добиться появления псевдоэлемента по центру элемента .todo-item__span. Помимо этого, убедитесь, что ширина и высота псевдоэлемента правильно настроены, чтобы он точно оказался посередине.