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来实现您的愿望。

像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将文本包装在<span>标记中。这是一个正在运作的JSFiddle，展示了这一点。

https://jsfiddle.net/j7wo5pxx/

下划线文本CSS差距

2 个答案: