Flip a tree structure using css - html

Question

I'm writing a code that creates a tree structure of data. and it is as below.
ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #000;
width: 0;
height: 2em;
}
#theAccount {
width: 100%;
max-width: 325px;
margin: auto;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 10px;
background-color: #f4f6f9;
text-align: center;
background-color: #fff9e3;
}
ul {
position: relative;
padding: 2em 0;
white-space: nowrap;
margin: 0 auto;
text-align: center;
}
ul:after {
content: '';
display: table;
clear: both;
}
li {
display: inline-block;
vertical-align: top;
text-align: center;
list-style-type: none;
position: relative;
padding: 2em .5em 0 .5em;
}
li:before,
li:after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #000;
width: 50%;
height: 2em;
}
li:after {
right: auto;
left: 50%;
border-left: 2px solid #000;
}
li:only-child:after,
li:only-child::before {
display: none;
}
li:only-child {
padding-top: 0;
}
li:first-child::before,
li:last-child::after {
border: 0 none;
}
li:last-child::before {
border-right: 2px solid #000;
border-radius: 0 5px 0 0;
}
li:first-child::after {
border-radius: 5px 0 0 0;
}
<div>
<div>
<div id="theAccount">
<h1>
Main
</h1>
</div>
<ul>
<li>
Sub1 Tyesxt </li>
<li>
Sub 2 Tyesxt
</li>
<li>
Sub3 Tyesxt
</li>
<li>
Sub4 Tyesxt
</li>
<li>
Sub5 Tyesxt
</li>
</ul>
</div>
</div>
Here the tree output that we get is top to bottom, I want to know how I can rotate it by 90 degrees. i.e. I want the tree to be from left to right like below with proper styling.
|--Sub1 Tyesxt
|--Sub2 Tyesxt
Main ------|--Sub3 Tyesxt
|--Sub4 Tyesxt
|--Sub5 Tyesxt
Please let me know how Can I get this done.
Thanks

Answer 1

Give a try for rotate() function.
As mdn says:
The rotate() CSS function defines a transformation that rotates an
element around a fixed point on the 2D plane, without deforming it.
Its result is a data type.
An example:
ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #000;
width: 0;
height: 2em;
}
#theAccount {
width: 100%;
max-width: 325px;
margin: auto;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 10px;
background-color: #f4f6f9;
text-align: center;
background-color: #fff9e3;
}
ul {
position: relative;
padding: 2em 0;
white-space: nowrap;
margin: 0 auto;
text-align: center;
}
ul:after {
content: '';
display: table;
clear: both;
}
li {
display: inline-block;
vertical-align: top;
text-align: center;
list-style-type: none;
position: relative;
padding: 2em .5em 0 .5em;
}
li:before,
li:after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #000;
width: 50%;
height: 2em;
}
li:after {
right: auto;
left: 50%;
border-left: 2px solid #000;
}
li:only-child:after,
li:only-child::before {
display: none;
}
li:only-child {
padding-top: 0;
}
li:first-child::before,
li:last-child::after {
border: 0 none;
}
li:last-child::before {
border-right: 2px solid #000;
border-radius: 0 5px 0 0;
}
li:first-child::after {
border-radius: 5px 0 0 0;
}
.foo {
transform: rotate(270deg);
margin-top: 150px;
}
h1 {
transform: rotate(90deg);
}
span {
transform: rotate(90deg);
display: block;
margin: 38px 0 0 0;
}
<div>
<div class="foo">
<div id="theAccount">
<h1>
Main
</h1>
</div>
<ul>
<li>
<span>Sub1 Tyesxt</span>
</li>
<li>
<span>Sub 2 Tyesxt</span>
</li>
<li>
<span>Sub3 Tyesxt</span>
</li>
<li>
<span>Sub4 Tyesxt</span>
</li>
<li>
<span>Sub5 Tyesxt</span>
</li>
</ul>
</div>
</div>

Answer 2

You can also give a try with flex & grid, then border and list-style:
body > div > div {
display: grid;
grid-template-columns: repeat(2, auto);
width: max-content;
margin: auto;
align-items: center;
font-size: 18px;
}
#theAccount {
display: flex;
}
#theAccount:after {
content: "";
width: 7.5vw;/* whatever*/
border: solid 1px ;
margin: auto 0;
}
h1 {
border-radius: 0.25em;
border: solid 1px;
padding: 0.15em 0.25em;
background: ivory;
}
ul {
border-left: solid 3px;
padding: 0;
border-radius: 15px;
}
li {
list-style: "\23e4\23e4\2800";
list-style-position: inside;
padding: 0;
margin: 0.5em 0;
}
li:first-of-type {
margin-top: -0.55em;
}
li:last-of-type {
margin-bottom: -0.45em;
}
li:first-of-type,
li:last-of-type {
list-style: "\2800\23e4\2800\20 ";
list-style-position: inside;
}
<div>
<div>
<div id="theAccount">
<h1>Main</h1>
</div>
<ul>
<li>Sub1 Tyesxt </li>
<li>Sub2 Tyesxt</li>
<li>Sub3 Tyesxt</li>
<li>Sub4 Tyesxt</li>
<li>Sub5 Tyesxt</li>
</ul>
</div>
</div>