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

来源：互联网发布：淘宝贪吃飒编辑：程序博客网时间：2024/05/21 09:54

如何实现文字下的这个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;}

实现效果图：

0 0