Добавляю галочки (CSS) к интерфейсу

Каждый раз ищу эти галочки на CSS (для спойлера). Нахожу в разных местах, но время тратится.

Пора делать хранилище.

<div class="ispoilerbutton"><span></span></div>

<style>
	.ispoilerbutton{
		display:block;
		float:right;
		width:40px;
		height:40px;
		cursor:pointer;
		position: relative;
		text-align: center;
	}
	
	.ispoilerbutton span{
		position: relative;
		display: inline-block;    
		margin-left: -9px;   
	}
	.ispoilerbutton span:before{
		content: '';
		position: absolute; left: -13px;   
		width: 20px;
		height: 3px;
		background: #000;
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);    
	}
	.ispoilerbutton span:after{
		content: '';
		position: absolute; left: 0;
		width: 20px;
		height: 3px;
		background: #000;
		-webkit-transform: rotate(-40deg);
		transform: rotate(-40deg);       
	}
	
	.milogr.active .ispoilerbutton span:before{
		-webkit-transform: rotate(-40deg);
		transform: rotate(-40deg);   
	}
	
	.milogr.active .ispoilerbutton span:after{
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);  
	}
</style>

Сложу код тут, чтобы не искать.

Напишите комментарий