Styling pseudo element when its immediate parent is also repeating

Code :

questions.map((question, index) => (

                  <div
                    className={styles.questionContainer}}
                  >
                    <div className={styles.circle}>
                      <span> {index + 1} </span>
                    </div>
                    <span
                    >
                      {question.questiontext}
                    </span>
                  </div>

I am working on react project where I am looping through an array and creating dynamic div list. That div is further divided into two parts using display:flex.

Left side of that flex I want circle and bar which connects another circle and creating chain ( timeline kind of thing).

I want to hide line created for first element but when I try

 .circle:first-child::before {
  display:none;
 }

It hides all line since parent of .circle is also repeating. So can anyone help to understand how we can hide line created for first element can be hidden.

I am tring to achieve this result in terms of UI.

Answer

Without seeing the generated HTML I cannot be entirely sure, but it looks as though what you need to select is the first question and then stop the pseudo before element on its circle showing.

So something like this:

 .questionContainer:first-child .circle::before {
  display:none;
 }