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

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

HTMl：

<ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li>
</ul>

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

a {text-decoration: none;color: black;
}li a:hover {text-decoration: underline;
}

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

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

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

CSS：

a {text-decoration: none;color: black;
}li a:hover {padding-bottom: 10px; /*盒子下边距，这里用来指定下划线距离文字的高度*/border-bottom: 2px solid skyblue; /*设定一个2px，实线，天蓝色的下边距*/
}

效果图如下：

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

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

HTML：

<ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a class="planning" href="#">职业规划</a></li>
</ul>

CSS:

a {display: inline-block; /*将<a>转化为行内块*/text-decoration: none;color: black;
}.planning {width: 90px; /*由于“职业规划”四个字过长，特别把他盒子整大一点*/
}li a:hover {padding-bottom: 10px; /*盒子下边距，这里用来指定下划线距离文字的高度*/border-bottom: 2px solid skyblue; /*设定一个2px，实线，天蓝色的下边距*/
}

效果如下：

诶感觉不错

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

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

HTML:

<ul><li><a href="#">首页</a><i id="underline">_____</i></li><li><a href="#">课程</a><i id="underline">_____</i></li><li><a href="#">职业规划</a><i id="underline">________</i></li>
</ul>

CSS:

a {text-decoration: none;color: black;
}#underline {position: absolute;/*绝对定位*/top: 1px;left: -11px;color: skyblue;font-size: 30px; /*设置定位和长度（用字体大小调节下划线长度）*/visibility: hidden; /*先设置可见度为隐藏*/
}li:hover>#underline {visibility: visible; /*悬停时可见*/
}

效果图如下：

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

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

HTML：

<ul><li><a href="#">首页<i id="underline">_____</i></a></li><li><a href="#">课程<i id="underline">_____</i></a></li><li><a href="#">职业规划<i id="underline">________</i></a></li>
</ul>

CSS：

a {text-decoration: none;color: black;
}#underline {position: absolute;/*绝对定位*/top: 1px;left: -11px;color: skyblue;font-size: 30px; /*设置定位和长度（用字体大小调节下划线长度）*/visibility: hidden; /*先设置可见度为隐藏*/
}a:hover>#underline { /*此处修改了包含关系，所以改为a:hover*/visibility: visible; /*悬停时可见*/
}

最终效果图：

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

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

下次见啦~

HTML中设定下划线样式并且指定下划线长度相关推荐

图片下划线 html,HTML U下划线标签元素 HTML下划线标签
为html字体下划线样式标签,即对文字实现下划线效果. 一.认识html下划线标签U 1.html U下划线标签语法: 以开始,以结束.u标签不是单独一个标签,而是有开始有闭合的一对标签,使用时候切记 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
html怎么设置下划线形状,科技常识：CSS如何给文字添加下划线样式
今天小编跟大家讲解下有关CSS如何给文字添加下划线样式 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS如何给文字添加下划线样式的相关资料,希望小伙伴们看了有所帮助. 在css中可以 ...
div html 下边加横线_CSS如何给文字添加下划线样式？
在CSS中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式.下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 方法1:使用text-decorati ...
html不用css超链接去掉下划线,div css之去掉a超链接下划线样式
一.去掉字体下划线装饰CSS属性格式代码 text- 解释: CSS下划线格式单词:text- 不闪现下划线(去掉字体下划线花色):none 二.网页重构前初始化去掉超链接下划线由于有的浏览器默认情 ...
Amazing Css：自定义下划线样式的Input
Amazing Css:自定义下划线样式的Input 这篇文章将通过CSS的方式实现一个常见的Input样式,包括一些VUE的Tips 效果相比于传统的方框Input同款样式,下划线的input输入 ...
html如何取消表格的横线,怎么去掉下划线样式？
怎么去掉超链接下划线?下面本篇文章给大家介绍一下在html网页和word文档中去掉下划线样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. html代码中去掉超链接的下划线 ...
[翻译] [Overleaf] LaTeX 中的粗体、斜体、下划线
原文:Bold, italics and underlining 译者:Xovee 翻译时间:2020年5月25日 LaTeX 中的粗体.斜体.下划线在一个文档中,简单的文字排版可以对某些概 ...

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

HTML中设定下划线样式并且指定下划线长度相关推荐

最新文章

热门文章