HTML Family Diagram with ul li
Family Diagram
- FATHER
- ME
➤ CSS (Cascading Style Sheets)
<style>
ul {
list-style: none;
margin: 0px;
padding: 0;
font: normal 16px/22px Arial;
color: lightgray;
}
li {
/* overflow: hidden; */
position: relative;
padding: 0 0 10px 35px;
}
li::before {
content: '';
position: absolute;
left: 5px;
top: 8px;
width: 20px;
height: 25px;
border: 2px solid lightgray;
border-width: 2px 0 0 2px;
}
li:last-child::before {
border-width: 2px 0 0 0;
}
li::after {
content: '';
position: absolute;
left: 0;
top: 3px;
width: 10px;
height: 10px;
background: #fff;
border: 2px solid lightgray;
border-radius: 50%;
}
li.current,
li.visited {
color: #000;
}
li.current::before {
border-top-color: green;
}
li.current::after {
border-color: green;
background: green;
}
li.visited::before,
li.visited::after {
border-color: green;
}
</style>➤ HTML Coding
<h2>Family Diagram</h2>
<ul>
<li>FATHER</li>
<li class="current">ME
<ul>Family(4)
<li class="visited"><a href="#">Sister </a>
<li class="visited"><a href="#">Brother </a>
<li class="visited"><a href="#">Brother </a>
<li class="visited"><a href="#">ฺSister </a>
</li>
</ul>
ความคิดเห็น
แสดงความคิดเห็น