checkbox handle만들기 + 글자

<div class="radioBox lightgray">
    <input id="temporary" class="blind" type="checkbox">
    <label for="temporary" data-han="한" data-eng="영"></label>
    <span class="handle"></span>
</div>

 

 

 

.radioBox {
	position: relative;
	width: 60px;
	height: 28px;
	color: #fff;
	border-radius: 3px;
}

.radioBox .handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	transform: translateX(0px);
	background-color: #37987d;
	transition: 0.3s;
	border-radius: 3px;
}

.radioBox input:checked~.handle {
	transform: translateX(30px);
}

.radioBox label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.3s;
	z-index: 1;
	cursor: pointer;
}

.radioBox label::before,
.radioBox label::after {
	display: block;
	position: absolute;
	top: 50%;
	line-height: 28px;
	text-align: center;
	width: 30px;
	height: 28px;
	transform: translateY(-50%);
	/* transform: translateX(0px) translateY(-50%); */
	transition: 0.3s;
}

.radioBox label::before {
	content: attr(data-han);
	/* background-color: #557deb; */
	left: 0;
	color: #fff;
}

.radioBox label::after {
	/* content: ''; */
	content: attr(data-eng);
    color: #898989;
	right: 0;
}

.radioBox input:checked+label::before {
	/* content: ''; */
    color: #898989;
	/* transform: translateX(30px) translateY(-50%); */
}

.radioBox input:checked+label::after {
	content: attr(data-eng);
	color: #fff;
}