如何用CSS移除HTML流程图中的多余线条？

Hey there! Let's tackle those unwanted yellow-marked lines in your CSS-based org chart. After looking through your code, those extra lines are likely coming from the default connector styles that aren't being properly overridden for certain node types (like vertical or leaf nodes).

Here's how to fix it:

1. Disable Top Border for Vertical Nodes #

The .orgchart li:not(:only-child)::before rule adds a top border to non-only-child list items, which creates that extra line for vertical layout nodes. Add this CSS to override it:

.orgchart li.vertical:not(:only-child)::before {
    border-top-width: 0;
    height: 0;
    width: 0;
}

This removes the unnecessary top border that's causing the extra line in your vertical sections.

2. Double-Check Leaf Node Styles #

Make sure leaf nodes (nodes with no children) don't have leftover connector lines. You already have a rule for hiding the bottom line on leaf nodes, but let's add an extra safeguard for the top connector too:

.orgchart li.leaf:not(:only-child)::before {
    border-top-width: 0;
    width: 0;
}

3. Verify Your HTML Class Names #

Also, double-check that your HTML nodes have the correct class names applied:

• Nodes with vertical children should have the vertical class on their <li> element
• Nodes with no children should have the leaf class
• The top-level node should have the root class

For example, a proper leaf node structure should look like this:

<li class="leaf">
    <p>Leaf Node Content</p>
</li>

Making sure these classes are correctly assigned ensures your CSS rules target the right nodes and hide unnecessary connectors.

These tweaks should eliminate those extra lines you're seeing. Let me know if you run into any other issues!

内容的提问来源于stack exchange，提问作者Zubair Nazer Oliyat