es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo mantener una altura dinámica del pseudo selector ::before?

14 Jul, 2023 Programación

La Vista de Interfaz de Usuario tiene un acordeón, donde necesito mostrar una representación de los conectores dentro de un acordeón y sus hijos, y estoy tratando de lograrlo utilizando un pseudo-selector ::before para el contenedor dentro del acordeón principal que contiene todos los acordeones hijos. La línea vertical izquierda debe detenerse en la última intersección del círculo y la línea horizontal. En la segunda imagen de muestra, el número de hijos dentro de la tabla también es desconocido, también intenté colocar el elemento “before” usando una propiedad de “bottom”.
¿Alguna ayuda para lograrlo?

 & {
    position: relative;
    margin-left: 2rem;
    padding: 0;
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    background: #003d76;
    left: 0;
    height: 100%;
    width: 1px;
    display: block;
  }

sample image 1
sample image 2
sample image 3

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resultado deseado de detener la línea vertical izquierda en la última intersección del círculo y la línea horizontal, puedes intentar agregar la propiedad border-radius al elemento que tiene el pseudo-selector ::before. Configura el border-radius igual a la mitad de la altura del círculo. Esto debería crear el efecto curvado que estás buscando.

    &::before {
    content: '';
    position: absolute;
    top: 0;
    background: #003d76;
    left: 0;
    height: 100%;
    width: 1px;
    border-radius: 50%;
    display: block;
}

    Para la segunda imagen de muestra, donde se desconoce la cantidad de hijos dentro de la tabla, puedes intentar agregar la propiedad bottom al pseudo-selector ::before para posicionarlo en la parte inferior del elemento padre.

    &::before {
    content: '';
    position: absolute;
    top: 0;
    background: #003d76;
    left: 0;
    height: 100%;
    width: 1px;
    border-radius: 50%;
    bottom: 0;
    display: block;
}

    Esto debería posicionar la línea del conector en la parte inferior del elemento padre, sin importar cuántos elementos hijos contenga.

Comments are closed.