本文探讨如何在前端开发中，通过CSS伪元素为顶部导航的列表项创建与文字宽度相同的悬停高亮线。关键在于利用'a'标签的:hover伪类结合::after伪元素，同时解决文字间隔问题，通过设置li的margin值实现导航按钮之间的等距间隔。
在做顶部页面导航时，很多情况下网站需要鼠标悬停的底部高亮线的效果。这部分nav一般是采用ul+lian+a的方式来做，li设置display为行内块元素。今天的想法是让这个悬停产生的线如何跟这个字的宽度相同 而不是li的宽度？
这个想法的关键在于这个悬停线统一是用伪元素来实现的，伪元素的宽度就是这个悬停线的宽度，因此css类选择器应该是 .nav ul li a:hover::after的格式。但还是出现了一些小问题，比如这个a的宽度只能是被里面文字撑开的宽度，不能设置值 一般对a就设置width:100%即可。 但导航的文字之间是有空隙的，这个是个技巧，也就是设置li的margin值，从而让导航按钮之间有个等大的间隔。 具体实现代码如下：
HTML部分：
<div class="nav"> <ul> <li><a href="#"
最低0.47元/天 解锁文章
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
