Placing a Div behind 3 divs

user_9940119 0
Viewed 59

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

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;
        }
    }

enter image description here

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

sass css html javascript
2 Answers

*{
      margin:0px;
      padding:0px;
      box-sizing: border-box;
     }
     body{
       height:100vh;
       display:flex;
       justify-content:center;
       align-items:center;
       flex-direction: column;
     }
     .container{
       position:relative; 
      }
     .container span{
       background:black;
       height:300px;
       display:block;
       width:10px;
       position: absolute;
       left:47%;
       top:20px;
     }
     .box1,
     .box2,
     .box3{
       background:greenyellow;
       width:100px;
       height:100px;
       border:1px solid blue;
       margin:10px 0px;
       position: relative;
     }
<body>
    <div class="container">
      <span></span>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>

user_143686520

try setting the parent divs position to relative then setting the before pseudo element's z-index to -1

.parent-div {
  position: relative;
}

.parent-div::after {
  content: "";
  position: absolute;
  z-index: -1;
}
user_124957310
Related