javascript - Adding edge labels to a CSS based tree -

this code based on 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/

i want add labels on edges. idea best way this? (the set of possible labels limited, 10 labels). this:

here's solution far robust allow label on first , last item of 3-items list (there's no phydical place label on second one...)

fiddle https://jsfiddle.net/sq6wy6bq/2/

html code: i'd add label in each item before labelled child so:

<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> 

relevant css: yay absolute positioning (sigh)

.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%; } 

in case of 2 or 4-10 children (wow), can still know number of items in list , position hand each label: trick andré luís. labels should not long or it'll surimpose...

possible improvements:

• flexbox or css table layout can achieve correct visual display of row of labels labels decorrelated of respective items (children) , lead bad semantics. improving semantics associating labels , items achieved via wai-aria (aria-describedby or similar aria attributes)
• or use (accessible) svg :) graphs love svg!