HTML中设定下划线样式并且指定下划线长度

今天笔者在写网页导航栏时，想要给链接加一个悬停下划线，写出来如下

HTMl：

CSS：（关于其他格式的设定略，只看下划线这一段代码）

这样确实是设定下划线了，但是效果如下，看上去很难看

既然这样，那么该如何改变一下呢？

其实可以使用border-bottom来实现，代码如下

CSS：

效果图如下：

可以看的出来，这样写确实比上一种美观不少，而且还可以设定各种参数，但需要注意当元素为块级元素时,下划线不仅仅是文本内容的长度,它会占满一行，所以当给块级元素添加下划线时，要指定宽度，或者将其转变为行级元素（display:inline）

 虽然第二种方法美观了不少，但是有一个小问题：”首页“下面的下划线太短了，不美观，有没有一种方法能将其下划线变长呢？当然有，可以通过将转化为行内块来实现，代码如下：

HTML：

CSS:

效果如下：

诶感觉不错

但是作为一个严谨的技术人来说，这个还不够，仔细观察会发现：将整个链接改为行内块之后，点击整个盒子的区域都会导致跳转（有没有什么软件能将光标一起截图啊，这张图是在obs窗口里截的，可能不太清晰，领会精神就行...）

 这里用定位来实现这个效果，代码如下：

HTML:

CSS:

效果图如下：

 但是别急，还存在一个小问题：

在悬停时，光标变成了输入状态，而且点击不能跳转了，推测可能是因为跟在同一级的原因，导致无法跳转，将放入中即可

HTML：

CSS：

最终效果图：

这次不会出现任何问题了，做到了仅当鼠标悬停在字上时，才会出现下划线~

有任何问题欢迎一起讨论~

下次见啦~