自分用チートシートです。
※JQuery必須

#HTML

<span class="icon"></span>

これだけ。

#CSS

.icon {
	display:block;
	position:relative;
	width:30px;  //正方形推奨
	height:30px; //正方形推奨
}
.icon:before,
.icon:after{
	content:'';
	display:block;
	position:absolute;
	top:50%;
	transform:translate(0,-50%);
	width:100%;
	height:3px; //線の太さ
	background-color:pink; //線の色
}
.icon:after {
	transform:translate(0,-50%) rotate(90deg);
}

.icon.minus:before {
    opacity: 0;
}
.icon.minus {
	transform:rotate(90deg); 
}

.icon,
.icon:before {
	transition: .4s; //トグルする時のアニメーション速度
}

#JQuery

$('.icon').on('click', function(){
    $(this).toggleClass('minus');
});

以上です。
スマホで情報量多めのページ作る時けっこう便利です。
大抵はトグル表示するコンテンツと合わせてdivで囲って使うと思うので、toggleClassは親divに対して行った方がいろいろとスマートにいけるかもです。