• HTML
• CSS

HTML

<div class="list">
    <h2>CSS Only Item Check List</h2>
    <label>
        <input type="checkbox" name="">
        <i></i>
        <span>Lorem ipsum dolor sit amet</span>
    </label>
    <label>
        <input type="checkbox" name="">
        <i></i>
        <span>Consecteur adipisicing alit</span>
    </label>
    <label>
        <input type="checkbox" name="">
        <i></i>
        <span>Duis aute irure dolor</span>
    </label>
    <label>
        <input type="checkbox" name="">
        <i></i>
        <span>sunt in culpa qui</span>
    </label>
    <label>
        <input type="checkbox" name="">
        <i></i>
        <span>deserunt mollit anim id est</span>
    </l

CSS

*
{
    margin:0;
    padding:0;
    font-family:consolas;
    box-sizing:border-box;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#001925;
}
.list
{
    padding:30px 75px 10px 30px;
    position:relative;
    background:#042b3e;
    border-top:50px solid #03a9f4;
}
.list h2
{
    color:#fff;
    font-size:30px;
    padding:10px 0;
    margin-left:10px;
    display:inline-block;
    border-bottom:4px solid #fff;
}
.list label
{
    position:relative;
    display:block;
    margin:40px 0;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}
.list input[type="checkbox"]
{
    -webkit-appearance:none;
    
}
.list i
{
    position:absolute;
    top:2px;
    display:inline-block;
    width:25px;
    height:25px;
    border:2px solid #fff;
}
.list input[type="checkbox"]:checked ~ i
{
    top:1px;
    border-top:none;
    border-right:none;
    height:15px;
    width:25px;
    transform:rotate(-45deg);
}
.list span
{
    position:relative;
    left:40px;
    transition:0.5s;
}
.list span:before
{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#fff;
    transform:translateY(-50%) scaleX(0);
    transform-origin:right;
    transition:transform 0.5s;
}
.list input[type="checkbox"]:checked ~ span:before
{
    transform:translateY(-50%) scaleX(1);
    transform-origin:left;
    transition:transform 0.5s;
}
.list input[type="checkbox"]:checked ~ span
{
    color:#154e6b;
}

/*
 All the  credits: https://www.youtube.com/watch?v=paivur01Z78
*/