尽管有文字装饰，但仍有下划线：没有＆＃39;

Question

我确实希望悬停时有半个下划线。这在使用: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

以及与此导航栏上的a标记相关的所有CSS：

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;
    }

JS小提琴：

http://jsfiddle.net/Ljvd2u06/9/

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

感谢。