Подчеркивание текста CSS Gap

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/