下划线文字CSS峡

Question

我希望当它活动时要强调我的文字，但是当我做它看起来像这样：

我只希望得到强调的文字，如果我用text-decoration:underline它强调这个词，但我不知道如何在文本和下划线之间划出空白。我添加了新类.currents。

这里是我的代码：

<header id="header" class="transparent-header" data-sticky-class="not-dark"> 
    <div id="header-wrap" style="height:180px;"> 
    <!-- Primary Navigation 
============================================= --> 
    <nav id="primary-menu" class="style-2 center"> 
     <div id="primary-menu-trigger"> 
     <i class="icon-reorder"></i> 
     </div> 
     <div style="text-align:center"> 
     <ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65"> 
      <li> 
      <a href="index.html"><div>Home</div></a> 
      </li> 
      <li> 
      <a href="about.html"><div>WHO WE ARE</div></a> 
      </li> 
      <li> 
      <a href="products.html"><div>WHAT WE TRADE</div></a> 
      </li> 
      <li> 
      <a href="services.html"><div>SERVICES</div></a> 
      </li> 
      <li class="currents"> 
      <a href="logistic.html"><div>LOGISTICS</div></a> 
      </li> 
      <li> 
      <a href="contact.html"><div>CONTACT</div></a> 
      </li> 
     </ul> 
     </div> 
    </nav><!-- #primary-menu end --> 
    <br> 
    </div> 
</header><!-- #header end --> 

CSS：

.currents {  
    height: 3em; 
    border-bottom: 1px solid ; 
    /* margin-bottom: 5px;*/  
} 

这里是工作的jsfiddle。在此先感谢

https://jsfiddle.net/light22/atzL4ahu/#&togetherjs=eLF0v1iEs8

Answer 1

可以使用border-bottom（而不是text-decoration:underline）和padding-bottom来实现你的愿望。

像这样：

a { 
 
    text-decoration:none; 
 
    display:inline-block; 
 
    border-bottom: 1px solid; 
 
} 
 

 
.gap { 
 
    padding-bottom:15px; 
 
}

<a href="#">without gap</a> 
 
<a href="#" class="gap">with gap</a>

Answer 2

你可以换一个<span>标签的文本。这是一个可用的JSFiddle，展示了这一点。

https://jsfiddle.net/j7wo5pxx/