::after疑似要素の境界線を使用して、目的の効果を得るCSSハックが可能です。
.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;
}
}
}
スタイルは、インラインスタイルが適用されたtdの直接の子であるタイトルのh3要素に直接適用しました。そのため、テンプレートから削除された場合はCSSを調整する必要があります。
ただし、希望どおりcomponents/parent-category-rowの上書きをスキップできます。
