Post Detail

Pada kesempatan kali ini saya akan membagikan sebuah tutorial atau lebih tepatnya kita belajar bersama-sama mengenai bagaimana cara membuat list view yang lebih menarik dan tentunya enak dipandang ^_^

Pertama kita buat terlebih dahulu file html nya

<link rel="stylesheet" href="css/list.css">
<div class="main">
    <ol>
        <li>Dashboard</li>
        <li>Master Data</li>
        <li>Category</li>
        <li>Tag</li>
    </ol>
</div>

Kedua kita buat file css nya

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    color: white;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

ol {
    width: 300px;
    list-style: none;
}

ol li {
    font-size: 1.2rem;
    padding: 20px 30px;
    margin: 10px 0;
    background: rgb(23, 23, 23);
    z-index: 100;
    position: relative;
    cursor: pointer;
    transition: all .4s;
}

ol li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    z-index: -1;
    transition: all .4s;
}

ol li:hover::before {
    width: 100%;
}

ol li:nth-child(1)::before {
    background: #36DB09;
}

ol li:nth-child(2)::before {
    background: #FFC300;
}

ol li:nth-child(3)::before {
    background: #FF5733;
}

ol li:nth-child(4)::before {
    background: #3933FF;
}

ol li:hover {
    transform: translateX(20px);
}

Untuk demonya disini 

Semoga bermanfaat sebagai pengetahuan untuk kita semua, terutama bagi penulis sendiri