向下箭头CSS样式

发表于 2020-04-15 16:27:31   |   下载附件   |   字体:
箭头向上箭头向下箭头arrow箭头样式

HTML

<div class="more up"><em>展开</em><u><i></i></u></div>


CSS

.more {
	.font(b,14px,32px); float: right; cursor: pointer;
	em { float: left; color: #333; margin-right:8px; font-weight:normal; }
	u { 
	    position: relative; display: block; width: 0; height: 0; float: left;
	    margin-top: 14px;
	    border-right: 6px solid transparent; 
	    border-top: 7px solid #666; 
	    border-left: 6px solid transparent; 
	}
	i { 
	    position: absolute; display: block; left: -6px; bottom: 2px; width: 0; height: 0; 
	    border-right: 6px solid transparent; 
	    border-top: 7px solid #fff; 
	    border-left: 6px solid transparent; 
	}
	&:hover {
		em { color: #189AE5; }
		u { border-top: 7px solid #189AE5; }
	}
	// 向上
	&.up {
		u { 
		    border-bottom: 7px solid #666; 
		    border-top: none; 
		}
		i { 
			top: 2px; bottom: auto;
		    border-bottom: 7px solid #fff; 
		    border-top: none; 
		}
		&:hover {
			em { color: #189AE5; }
			u { border-bottom: 7px solid #189AE5; }
		}
	}
}