todo

1
li {
2
    position: relative;
3
    font-size: 24px;
4
    border-bottom: 1px solid #ededed;
5
    display: flex;
6
    align-items: center;
7
}
8

9
input[type="checkbox"] {
10
    text-align: center;
11
    width: 40px;
12
    /* auto, since non-WebKit browsers doesn't support input styling */
13
    height: auto;
14
    position: absolute;
15
    top: 0;
16
    bottom: 0;
17
    margin: auto 0;
18
    border: none; /* Mobile Safari */
19
    -webkit-appearance: none;
20
    appearance: none;
21
}
22

23
input[type="checkbox"]:after {
24
    content: '\u2713';
25
    font-size: 20px;
26
    color: #5dc2af;
27
}
28

29
input[type="checkbox"]:checked:after {
30
    color: #5dc2af;
31
}
32

33
button {
34
    background: none;
35
    border: none;
36
    padding: 0;
37
    cursor: pointer;
38
    font: inherit;
39
    color: inherit;
40
}
41

42
button:hover {
43
    color: #af5b5e;
44
}
45

46
span {
47
    flex-grow: 1;
48
}
49