[CSS] チェックボックスの装飾

HTML

<div class="checkbox"><p><input id="agree" type="checkbox" name="" value=""><label for="agree"テキスト</label></p></div>

CSS

.checkbox{
	
}
.checkbox input[type="checkbox"]{
	display: none;
}
.checkbox label{
	display: block;
	position: relative;
	padding-left: 70px;
}
.checkbox label:after{
	content: "";
	display: inline-block;
	width: 55px;
	height: 55px;
	border: 2px solid #000000;
	margin-right: 15px;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translate3d(0,-50%,0);
	
}
.checkbox input[type="checkbox"]:checked + label:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 4px;
    width: 55px;
    height: 25px;
    border: 7px solid #1a1363;
    border-top-style: none;
    border-right-style: none;
    transform: rotate(-45deg) scale(1, 1);
}