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:
JavaScript
x
50
50
1
HTML2
3
<div className={clsx(styles.container__box, styles['container__box--1'])}>4
Box 15
</div>6
<div className={clsx(styles.container__box, styles['container__box--2'])}>7
Box 28
</div>9
<div className={clsx(styles.container__box, styles['container__box--3'])}>10
Box 311
</div>12
13
CSS14
15
&__box {16
width: 25rem;17
height: 25rem;18
19
&:not(:last-child) {20
margin-bottom: 5rem;21
}22
23
&--1 {24
background-color: red;25
z-index: 100;26
}27
28
&--2 {29
background-color: green;30
position: relative;31
&::before {32
content: "";33
background-color: black;34
color: red;35
font-weight: bold;36
height: 85rem;37
width: 1rem;38
display: block;39
position: absolute;40
top: -120%;41
left: 50%;42
}43
}44
45
&--3 {46
background-color: yellow;47
z-index: 100;48
}49
}50
I’m unable to hide the pseudo selector behind the parent div.
Advertisement
Answer
JavaScript
1
34
34
1
*{2
margin:0px;3
padding:0px;4
box-sizing: border-box;5
}6
body{7
height:100vh;8
display:flex;9
justify-content:center;10
align-items:center;11
flex-direction: column;12
}13
.container{14
position:relative; 15
}16
.container span{17
background:black;18
height:300px;19
display:block;20
width:10px;21
position: absolute;22
left:47%;23
top:20px;24
}25
.box1,26
.box2,27
.box3{28
background:greenyellow;29
width:100px;30
height:100px;31
border:1px solid blue;32
margin:10px 0px;33
position: relative;34
}JavaScript
1
8
1
<body>2
<div class="container">3
<span></span>4
<div class="box1"></div>5
<div class="box2"></div>6
<div class="box3"></div>7
</div>8
</body>