css- 체크박스

https://blogpack.tistory.com/876

after 인자를 사용해서 할수 있었따 !!

<div class="checkbox">
    <input type="checkbox" name="check2" id="check2" value="2" class="checkbox2">
    <label for="check2">디자인체크박스</label>
</div>
.checkbox2 + label{
    position: relative;
}
.checkbox input[type="checkbox"].checkbox2{
    display: none;
}
.checkbox input[type="checkbox"].checkbox2 + label:before { /* 체크박스 배경 */
    display: inline-block;
    content: '';
    width: 1.25em; 
    height: 1.25em;
    border: 2px solid #a66;
    background-color: #a00;
    border-radius: 50%;
    margin: 0 5px -6px 0;
}
.checkbox input[type="checkbox"].checkbox2 + label:after { /* 체크 마크 */
    position: absolute; // 나는 relative 로 함 ---- 지영
    left: 4px;
    content: '✔'; /* 체크 마크 ASCii 문자 */
    font-size: 1.5em;
    line-height: 0.8;
    color: #a88;
    transition: all .3s;
}
[type="checkbox"].checkbox2 + label:after { /* 기본 상태 - 투명에 크기 0 */
    opacity: 0;
    transform: scale(0);
}
[type="checkbox"]:checked.checkbox2 + label:after { /* 체크 상태 - 불투명에 크기 1 */
    opacity: 1;
    transform: scale(1);
}