将边缘标签添加到基于CSS的树

Question

此代码基于this。

<div class="tree">
    <ul>
        <li>
            <a href="#">Great Grand Child</a>
        </li>
        <li>
            <a href="#">Great Grand Child</a>
        </li>
        <li>
            <a href="#">Great Grand Child</a>
        </li>
    </ul>
</div>

https://jsfiddle.net/danyaljj/sq6wy6bq/

我想在边缘添加标签。知道最好的方法是什么？ （可能的标签集是有限的，如10个标签）。像这样的东西：

Answer 1

这是一个远非健壮的解决方案，只允许在3项目列表的第一个和最后一个项目上贴标签（第二个标签上没有标签的位置......）

小提琴https://jsfiddle.net/sq6wy6bq/2/

HTML代码：我会在标记的子项之前的每个项目中添加标签，以便：

<ul>
    <li>
        <span class="so-label">Label 1</span>
        <a href="#">Great Grand Child</a>
    </li>
    <li>
        <a href="#">Great Grand Child</a>
    </li>
    <li>
        <span class="so-label">Label 2</span>
        <a href="#">Great Grand Child</a>
    </li>
</ul>

相关CSS：绝对定位（叹气）

.so-label {
    position: absolute;
    top: -40%;
    width: 100%;
    font-size: 0.8em;
}
li:first-child .so-label {
    left: 50%;
}
li:last-child .so-label {
    left: -50%;
}

如果是2或4-10个孩子（哇），您仍然可以知道列表中的项目数量，并手动定位每个标签：trick from André Luís。标签不应该太长或者它会覆盖......

可能的改进：

• flexbox或CSS表格布局可以实现一行标签的正确视觉显示，但随后这些标签将与其各自的项目（子项）相关联，这将导致错误的语义。通过关联背面标签和项目来改进这种语义可以通过WAI-ARIA（aria-describedby或类似的ARIA属性）来实现。
• 或者您可以使用（accessible） SVG :)图表喜欢SVG！