I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree.
For testing purposes, here's a snippet of my HTML and CSS:
.tree ul {
padding-top: 20px;
position: relative;
}
.tree li {
display: inline-block;
white-space: nowrap;
vertical-align: top;
margin: 0 -2px 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
/*We will use ::before and ::after to draw the connectors*/
<!-- Remaining CSS styles are omitted for brevity -->
<div class="tree">
<ul>
<!-- List items continue here -->
</div>The provided CSS is based on CSS3 Family Tree, resulting in a chart that looks like this:
https://i.sstatic.net/7fUbN.jpg
However, I need it to be displayed upside down, with "Self" at the bottom and the earliest generation at the top.
I managed to reverse the box order by tweaking the list structure, but I'm struggling to adjust the CSS to get the connectors aligned correctly as shown in this example:
https://i.sstatic.net/hdVEI.jpg
Does anyone know how I can modify the ::before and ::after pseudo elements to achieve my desired layout? Or should I approach this problem differently?
(Alternatively, placing "Self" on the left and the earliest generation on the right might be a viable solution if it yields better results.)