Html 下划线为'；文本装饰：无'；

我确实希望悬停上有一个半下划线。这在小提琴中用

：before

伪码演示。我不想有一个额外的下划线时，链接被点击

显而易见的答案已经确定

a {text-decoration: none}

这是行不通的。它在小提琴上很好用，但在这里不适用

这是我的导航栏：

<nav>
<ul>
    <li><h1 ><a id="name" href="#">y o u r &nbsp;N A M E</a></h1></li>
    <li><h1><a href="#">W O R K S</a></h1></li>
    <li><h1><a href="#">A B O U T</a></h1></li>
</ul>
</nav

一把小提琴：

为什么这在小提琴中起作用，但在应用中却不起作用？我该怎么做才能让它在我的网站上消失

---

谢谢

刚刚在safari和firefox上进行了测试，它工作正常-只有一半下划线，请确保关闭html中的

元素，并删除第一个

元素中的多余空间。完整CSS中可能有另一条规则覆盖了上面发布的规则。试试这个：

a{text decoration:none！important；}

作为一个测试，你就会知道。你有没有尝试清除你的浏览器缓存？它很可能是由比

a{…}

更具体的css规则设计的。您可以使用开发人员工具了解正在发生的事情，并在不使用

的情况下覆盖css！重要提示

我通过添加一个简单的

位置解决了这个问题：static

在我下面的回答中。刚刚在safari和firefox上测试过，它工作正常-只有一半下划线，请确保关闭html中的

元素，并删除第一个

元素中的额外空间。完整CSS中可能有另一条规则覆盖了上面发布的规则。试试这个：

a{text decoration:none！important；}

作为一个测试，你就会知道。你有没有尝试清除你的浏览器缓存？它很可能是由比

a{…}

更具体的css规则设计的。您可以使用开发人员工具了解正在发生的事情，并在不使用

的情况下覆盖css！重要提示

我通过添加一个简单的

位置解决了这个问题：static在我下面的答案中。
a {
color: black;
display: inline-block;
text-decoration: none;
}

nav a {
position: relative;
font-size: .4em;
}

nav a:hover::before{
position: absolute;
bottom: -10px;
left: 25%;
right: 25%;
height: 1px;
background: #7b0700;
content: "";
}

 a:active,  a:visited {
border-bottom: 0 !important ;
}

a:hover {
text-decoration: none;
color: #7b0700;
}

a:active {
    border-bottom: 1px solid black;
    text-decoration: none;
    color: #7b0700;
    }