@mdaa
студен, учусь верстке

Как можно объяснить подобное поведение песевдо-элемента :after?

Всем привет. Есть сайт - oazis.pro-dd.ru на нем есть список товаров, если переключить вид разположения товаров на список, то у товаров появляется разделительная нижняя линия, которая сверстана через псевпоэлемент :after. Вся разметка карточек и стилей идентична, но как можно увидеть, визуально какая-то из линий явно толще, а какая-то тоньше ( высота у них 1px ) Первый вопрос почему, как это возможно? Второй момент: псевдо-элемент :after имеет абсолютное позиционирование, и если я изменю его позицию по вертикали на 1 пиксель, то те полосы которые были толще, станут тоньше, а те что тоньше , наоборот. За счет чего это может происходить? Кто-нибудь объясните пожалуйста подобное поведение, буду крайне признателен.

5f85a1259b18b593163888.jpeg
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
Lynn
@Lynn
nginx, js, css
Судя по тому, что картинка которая должна быть шириной не более 446px на вашем скриншоте имеет ширину 557px где-то выставлен масштаб 125%

Масштабирование может быть и на уровне операционной системы, так что надо посмотреть в настройках ОС.

Так же в хроме можно поменять дефолтный масштаб со 100% на другое значение. Это тоже строит проверить в настройках хрома (открыть chrome://settings и поискать слова zoom/масштаб)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sharomet
@sharomet
Front-End
Это скорей всего у тебя монитор так отображает. У меня всё норм. они все одинаковой толщины.
У меня были подобные траблы пока я не поменял монитор и видаху.
Ответ написан
@cheeroque
Попробуйте отключить box-shadow у псевдоэлемента ::before на этой же карточке. У него высота в процентах, получается дробная, и от тени кусок может торчать.
Ответ написан
Ваш ответ на вопрос

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

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