实习小结二：关于border问题，实现文字下的小三角下划线

如何实现文字下的这个border，让我苦恼了好一会儿，贴上源码！

先设置li列表放文字，然后在a标签内放一个span标签；

border实现就是先在li下面设置一个solid的border，然后通过padding-bottom设置下划线到文字的距离，从而留出小三角的空间，小三角就是通过span实现的。

 

 <li class="sub2">
	<a href="">最佳虚拟主机
	<span class="anotch"> </span>
	</a>
</li>

在css中注意span的hover使用方法，css是这样的：

.sub2 a:hover{
	color: #5179BD;
	border-bottom: 2px solid #5179BD;
		
	}

.sub2 a:hover span{
	overflow: hidden;
	position: absolute;
		
	width: 0px;
	height: 0px;
	background: transparent;
		
	border-top: 7px solid transparent;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #5179BD;
	margin-left: -70px;
	margin-top: 24px;

	}

实现效果图：