.wrapper {
	position: absolute;
	transform: translate(-10%, -90%) rotateY(180deg);
	display: flex;
}
.wrapper input {
	display: none;
}
.wrapper label {
	display: block;
	cursor: pointer;
	width: 60px;
}
.wrapper label:before {
	content: '★';
	position: relative;
	display: block;
	font-size: 40px;
	color: black;
}
.wrapper label:after {
	content: '★';
	position: absolute;
	display: block;
	font-size: 40px;
	color: orange;
	top: 0;
	opacity: 0;
	transition: .6s;
}
.wrapper label:hover:after, .wrapper label:hover~label:after, .wrapper input:checked~label:after {
	opacity: 1;
}