I'm working on a web layout where I need to display a series of steps connected by a line. I've set up a flexbox layout with spheres representing each step and a line connecting them. However, there's too much space horizontally between the line and the spheres, while I want to bring the line closer to the spheres. Ideally it should be only a few pixels between them.
Here's the HTML and CSS code I'm using:
.steps-container,.label-container { display: flex; flex-direction: row; justify-content: center;}.step { display: flex; flex-direction: column; align-items: center; justify-content: center;}.sphere { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background-color: lightgrey; color: white; font-size: 32px;}.line { position: relative; top: 25px; height: 3px; background-color: lightgrey; flex-grow: 1; max-width: 150px;}.label { text-align: center; position: relative;}.spacer { flex-grow: 1; max-width: 150px;}<div class="steps-container"><div class="step"><div class="sphere">1</div><div class="label">First step label</div></div><div class="line"> </div><div class="step"><div class="sphere">2</div><div class="label">Second step label</div></div></div>I suspect the problem lies in my .line CSS class.
I didn't manage to resolve the problem and I'm starting to doubt it is even possible to do what I'm trying to do. I tried moving the line using position: relative but I can't adjust the length of the line that way. I also tried using position: absolute but I just can't get the result I'm expecting and I don't really know how to position the line using absolute values correctly.