Underline Text CSS Gap

Question

I want my text to be underlined when it's active but when I did it looks like this:

I just only want the text to get underlined, if I used text-decoration:underline it underline the word but the I don't know how to make a gap between the text and the underline. I added new class .currents.

Here is my code:

<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;*/      
}

Here is the working jsfiddle. Thanks in advance

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

@MoshFeu jsfiddle.net/light22/atzL4ahu/#&togetherjs=eLF0v1iEs8 — jezz
– jezz, Commented Aug 21, 2016 at 7:08

Mosh Feu · Accepted Answer · 2016-08-21 07:12:44Z

2

You can use border-bottom (instead of text-decoration:underline) and padding-bottom to achieve your wish.

Like this:

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>

answered Aug 21, 2016 at 7:12

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CloudBranch Over a year ago

Accept this as the answer by clicking the checkmark below the voting arrows.

CloudBranch · Accepted Answer · 2016-08-21 07:16:09Z

1

You could wrap the text in a <span> tag. Here's a working JSFiddle demonstrating this.

https://jsfiddle.net/j7wo5pxx/

answered Aug 21, 2016 at 7:16

CloudBranch

1,6143 gold badges20 silver badges24 bronze badges

1 Comment

CloudBranch Over a year ago

Mosh Fue's answer also works, and should be the accepted answer. It's a simpler solution which doesn't make use of the extra markup. I answered with this only as an alternative.

Collectives™ on Stack Overflow

Underline Text CSS Gap

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related