The aim is to code the design below with 3 boxes appearing on top of a straight vertical line (Horizontal on desktop).

I have tried creating this using :: before pseudo selector.

Here is the code:

HTML

<div className={clsx(styles.container__box, styles['container__box--1'])}>
        Box 1
      </div>
      <div className={clsx(styles.container__box, styles['container__box--2'])}>
        Box 2
      </div>
      <div className={clsx(styles.container__box, styles['container__box--3'])}>
        Box 3
      </div>

CSS

&__box {
        width: 25rem;
        height: 25rem;

        &:not(:last-child) {
            margin-bottom: 5rem;
        }
        
        &--1 {
            background-color: red;
            z-index: 100;
        }

        &--2 {
            background-color: green;
            position: relative;
            &::before {
                content: "";
                background-color: black;
                color: red;
                font-weight: bold;
                height: 85rem;
                width: 1rem;
                display: block;
                position: absolute;
                top: -120%;
                left: 50%;
            }
        }

        &--3 {
            background-color: yellow;
            z-index: 100;
        }
    }

I'm unable to hide the pseudo selector behind the parent div.