纯css实现互动清单

如图，点击每条信息可以实现删除这条信息的效果。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cb {
            display: none;
        }
        .mark {
            position: relative;
            display: inline-block;
             20px;
            height: 20px;
            border: 2px solid transparent;
        }
    .mark:before {
    content: "";
    display: none;
    position: absolute;
    top:50%;
    left: 25%;
    height: 4px;
     8px;
    border: solid black;
    border- 0 0 4px 4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}/*画√，这是呈现在页面的钩钩*/
        .cb:checked~ .mark:before {
            display: block;
        }
        .cb:checked~ .con {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<fieldset>
    <label>
        <input type="checkbox" class="cb" checked>
        <span class="mark"></span>
        <span class="con">this is a test</span>
    </label>
<br>
    <label>
        <input type="checkbox" class="cb">
        <span class="mark"></span>
        <span class="con">this is a test</span>
    </label>
    <br>
    <label>
        <input type="checkbox" class="cb">
        <span class="mark"></span>
        <span class="con">this is a test</span>
    </label>
</fieldset>
</body>
</html>