1. 前言
在网页设计中，下划线可以起到很好的分隔作用，但在某些情况下，下划线会显得不够美观，因此我们需要一种方法来隐藏下划线，本文将介绍html5如何隐藏下划线。
2. text-decoration属性
text-decoration属性用于设置文本修饰效果，包括下划线、删除线、上划线等，它的值有以下几种：
none: 默认值，不显示任何修饰效果。
underline: 显示下划线。
overline: 显示上划线。
line-through: 显示删除线。
underline overline: 同时显示上划线和下划线。
我们可以通过设置text-decoration的值为none来隐藏下划线。
a {
text-decoration: none;
}
以上代码表示将所有a标签的下划线隐藏。
3. border-bottom属性
除了text-decoration属性，我们还可以使用border-bottom属性来隐藏下划线。
border-bottom属性用于设置元素底部边框，它的值包括：线条宽度、线条样式和线条颜色。
我们可以通过设置线条宽度为0来隐藏下划线。
a {
border-bottom: 0;
}
以上代码表示将所有a标签的下划线隐藏。
4. :hover伪类
在一些交互效果中，我们希望在鼠标悬停时显示下划线，但在正常状态下又不显示下划线，这时就可以使用:hover伪类来实现。
在:hover伪类下，我们可以设置text-decoration和border-bottom的属性值来达到不同的效果。
以下代码表示在鼠标悬停时显示下划线，正常状态下不显示下划线。
a {
text-decoration: none;
border-bottom: 1px solid #000;
}
a:hover {
text-decoration: underline;
border-bottom: 0;
}
5. 总结
本文介绍了html5如何隐藏下划线，主要涉及text-decoration和border-bottom两个属性。通过设置这两个属性的属性值来达到隐藏下划线的效果。同时，我们还介绍了:hover伪类的使用，可以在鼠标悬停时显示下划线，正常状态下不显示下划线。