如何为特定链接添加下划线？

Question

我有一个问题，可能很容易，但我似乎无法弄清楚。我没有下划线的各个环节，除了上悬停，主动或聚焦：

a { 
    text-decoration: none; 
} 
a:hover, a:focus, a:active { 
    text-decoration: underline; 
} 

现在，我在HTML结构是这样的：

<div class="filter-wrapper"> 
    <a href=""> 
     <span class="filter-tag"> 
     Tag Name 
     </span> 
    </a> 
</div> 

我不希望任何下划线上悬停，只为该div激活或关注。我如何实现这一目标？

我试着用文本修饰为它做一个特殊的类：没有，但它似乎没有工作。我觉得很愚蠢。

Answer 1

.filter-wrapper a:hover, .filter-wrapper a:focus, .filter-wrapper a:active { 
    text-decoration: none; 
} 

.filter-wrapper a:hover, 
 
    .filter-wrapper a:focus, 
 
    .filter-wrapper a:active { 
 
     text-decoration: none; 
 
    } 
 
    a { 
 
     text-decoration: none; 
 
    } 
 
    a:hover, 
 
    a:focus, 
 
    a:active { 
 
     text-decoration: underline; 
 
    }

<div class="filter-wrapper"> 
 
    <a href=""> 
 
    <span class="filter-tag"> 
 
     Tag Name 
 
     </span> 
 
    </a> 
 
</div> 
 

 
<a href="#">Test</a>