È possibile fare un CSS hack con il bordo dello pseudo-elemento ::after per ottenere l’effetto desiderato.
.category-list tbody .category {
border-left: none;
position: relative;
padding-left: 50px;
> h3:first-child {
border-width: 0;
border-style: solid;
border-color: inherit;
&::after {
content: "";
width: 0px;
height: 70%;
position: absolute;
border-radius: 20px;
border-width: 10px;
border-style: solid;
border-color: inherit;
top: 50%;
transform: translateY(-50%);
left: 10px;
}
}
}
Nota che ho applicato lo stile direttamente all’elemento h3 del titolo perché è un figlio diretto del td a cui è stato applicato lo stile inline. Quindi, se il template dovesse eliminarlo, dovrai modificare il tuo CSS.
Ma puoi evitare di sovrascrivere components/parent-category-row come desideravi.
