Código:
questions.map((question, index) => ( <div className={styles.questionContainer}} > <div className={styles.circle}> <span> {index + 1} </span> </div> <span > {question.questiontext} </span> </div>Estoy trabajando en un proyecto de reacción en el que estoy recorriendo una matriz y creando una lista div dinámica. Ese div se divide en dos partes usando display:flex.
El lado izquierdo de ese flex quiero un círculo y una barra que conecta otro círculo y crea una cadena (tipo de línea de tiempo).
Quiero ocultar la línea creada para el primer elemento, pero cuando intento
.circle:first-child::before { display:none; }Oculta todas las líneas ya que el padre de .circle también se repite. Entonces, ¿alguien puede ayudar a comprender cómo podemos ocultar la línea creada para el primer elemento?
Estoy tratando de lograr este resultado en términos de interfaz de usuario.
Sin ver el HTML generado, no puedo estar completamente seguro, pero parece que lo que necesita seleccionar es la primera pregunta y luego detener el elemento pseudo anterior en su círculo.
Así que algo como esto:
.questionContainer:first-child .circle::before { display:none; }