arrow.css

<a class="tab" href="#">Show All</a>

.tab {
	text-transform: uppercase;
	font-size:14px;
	color:$black;
	text-decoration: none;
	font-weight: $fw-medium;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	position: relative;
	
	&:hover {
		border-bottom: 3px solid $black;
		text-decoration: none;
		color:$black;
	}
	&:hover:after {
		content:"";
		triangle: pointing-down;
		width:20px;
		height:10px;
		background-color:$black;
	    position: absolute;
		left: 40%;
		bottom: -40%;
		
	}
	
}