create a list item with a specific structure - css

Question

i am developing an app using angular;my problem is i have to create a structure like in the uploaded picture,but i can't figure it out;
i have tried with list style and pseudo classes,but it does n't work it out;
.mod-ul li::before {
content: "L";
color: #88c4e6;
position: relative;
left: 0;
top: -4px;
font-size: 25px;
}

Answer 1

You could do something like the below:
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
padding-left: 1em;
}
ul ul li {
padding-left: 1em;
border: 1px solid black;
border-width: 0 0 1px 1px;
}
li.container {
border-bottom: 0px;
}
li.empty {
font-style: italic;
color: silver;
border-color: silver;
}
li p {
margin: 0;
background: white;
position: relative;
top: 0.5em;
}
ul ul li ul {
border-top: 1px solid black;
margin-left: -1em;
padding-left: 2em;
}
ul ul li:last-child ul {
border-left: 1px solid white;
margin-left: -17px;
}
<ul class="parent">
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
</li>
</ul>
</li>
</ul>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
</li>
</ul>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li class="empty">
<p>empty</p>
</li>
</ul>
</li>
</ul>