下劃線文字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/