Edit in JSFiddle

<div>
    <input type="checkbox" name="q[]" id="q1" />
    <label for="q1">小宝3225</label>
    <input type="checkbox" name="q[]" id="q2" />
    <label for="q2">王老白白白</label>
    <input type="checkbox" name="q[]" id="q3" />
    <label for="q3">空夫31</label>
    <input type="checkbox" name="q[]" id="q4" />
    <label for="q4">谷大白话</label>
    <input type="checkbox" name="q[]" id="q5" />
    <label for="q5">Meathill</label>
    <input type="checkbox" name="q[]" id="q6" />
    <label for="q6">一毛不拔大师</label>
    <hr />
</div>

div {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    font: 14px/25px Arial;
}
input[type=checkbox], label {
    order:2;
}
input[type=checkbox] {
    display:none;
}
label {
    min-width:120px;
    border:1px solid #CCC;
    padding:2px 8px;
    text-align:center;
    margin:0 5px 5px 0;
    background:#FFF;
    color:#333;
    border-radius:3px;
    position:relative;
    box-sizing:border-box;
}
label:hover {
    border-color:#ADADAD;
    background:#EBEBEB;
    cursor:pointer;
}
label:hover:before {
    content:'\f067';
    font-family:'FontAwesome';
    position: absolute;
    left:6px;
    top:3px;
}
hr {
    width: 100%;
    order: 1;
    display:none;
}
input[type=checkbox]:checked {
    order:0;
}
input[type=checkbox]:checked + label {
    order:0;
    background-color: #5cb85c;
    border-color: #4cae4c;
    color:#FFF;
}
input[type=checkbox]:checked + label:before {
    content:'\f00c';
    font-family:'FontAwesome';
    position: absolute;
    left:6px;
    top:3px;
}
input[type=checkbox]:checked + label:hover {
    background-color: #47a447;
    border-color: #398439;
}
input[type=checkbox]:checked + label:hover:before {
    content:"\f00d";
}
input[type=checkbox]:checked ~ hr {
    display:block;
}