Как линию фона закрепить под before?

Question

[Даниил Конев]

Вообщем у меня на странице история компании. В виде таймлайна. Квадратики сделал через before, а линию картинкой и бэкраунд с позишеном. При заходе через Я.Браузер все ОК, при заходе на Гугл.Хром все смещается. При других разрешениях тоже.... Как сделать что бы линия четко держалась квадрата before по центру. Под разрешения делать media, сделаю, но как решить вопрос с браузерами, везде фон в разных положениях.

https://rosautodor.tmweb.ru/history-dorauto/

Для широкоформатных код такой:

.section.mcb-section.mcb-section-1pqjfdwar {
    background-position: left+33.2% top !important;
}

Comments

[Ankhena]

Проще было задать border-left.
https://jsfiddle.net/rtghfv4y/
И никаких диких 200vh

p.s. float для верстки сеток не используют уже много лет.
Для этого есть flex и grid.

Answer 1

[apoca1ipsis]

Я бы сделал примерно так

h2:after {
    content: "";
    display: block;
    height: 200vh;
    width: 1px;
    position: absolute;
    left: 57px;
    top: 0;
    background: #f00;
}

.mcb-wrap {
overflow: hidden;
}

Comments

[Даниил Конев]

Идеально бро! Тоже крутил after, но что не получалось! От души, спасибо!

Answer 2

[michaelvovk]

а почему ты задаешь background блоку .section.mcb-section.mcb-section-1pqjfdwar, а не .section_wrapper.mcb-section-inner?