How to make border-bottom animation & ignore padding

Question

I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using padding: 0px; doesn't do it.

Here's what I've got so far, bear with me since I'm fairly new to HTML & CSS and this is my first time making a website:

*{
 padding: 0px;
 margin: 0px;
}
#navdiv ul {
 width: 100%;
 height: 80px;
 line-height: 80px;
 vertical-align: middle;
 background: #333;
 margin-top: 5px;
}
#container {
 margin-left: 200px;
 margin-right: 200px;
}
#navdiv ul a {
 width: 80%;
 text-decoration: none;
 color: #f2f2f2;
 padding: 15px;
 font-size: 16px;
}
#navdiv ul li {
 height: 63px;
 list-style-type: none;
 float: right;
}
#navdiv ul li:hover {
 border-bottom: 5px solid #FF9933;
 transition: all 0.3s ease-in-out;
}
#highlight {
 display: inline-block;
 line-height: 1em;
 padding: 0;
 border-bottom: 5px solid #FF9933;
}
#navdiv img {
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 60px;
 vertical-align: middle;
}

<nav>
  <div id="Maindiv">
    <div id="navdiv">
      <ul>
        <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <li><a href="../item4/index.html">Item 4</a></li>
          <li><a href="../item3/index.html">Item 3</a></li>
          <li><a href="../item2/index.html">Item 2</a></li>
          <li><a href="../item1/index.html" id="highlight">Item 1</a></li>
        </div>
      </ul>
    </div>
  </div>
</nav>

As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.

While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?

I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.

Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know.

Massive thanks! - Kay.

terryeah · Answer 1 · 2017-07-25T01:36:27.450

1

Removing width: 80%; from #navdiv ul a will fix the larger border-bottom issue.

Please find below for left-to-right border-bottom effect.

https://codepen.io/julysfx/pen/qXBzYL

edited Jul 25 '17 at 01:36

answered Jul 25 '17 at 01:23

terryeah

583
5
17

I've tried to remove the `width: 80%;` from the `#navdiv ul a` but the border-bottom is still taking the padding of the `li`. But thanks a bunch for the effect, much appreciated! :D – Kayonne Jul 25 '17 at 09:26

TripWire · Accepted Answer · 2017-07-26T01:20:13.400

The reason for the border looking like that is because the border is around the outside of the HTML element. Padding is within the element so the border will incorporate that and thus do a border at that boundary. This stack overflow question explains this with diagrams: Difference between margin and padding?

You might want to change to using margin to space out the items. Also, width: 80% might also make the border look a bit longer than you imagined. You could either increase the margin between items, or if you really want the items to be 80% wide, you could have a parent div which is 80% width so that it doesn't affect the border.

Is this more what you are looking for?

*{
 padding: 0px;
 margin: 0px;
}

.slider {
  position: absolute;
  display:block;
  left: 0;
  top: 90%;
  margin: 0 auto;
  height: 2px;
  width: 0%;
  border-bottom: 5px solid #FF9933;
  transition: width 1s ease;
}

#navdiv {
  background: #333;
}

#navdiv ul {
 width: 100%;
  display: inline;
}

#container {
 margin-left: 200px;
 margin-right: 200px;
  height: 63px;
  line-height: 63px;
}

#navdiv ul a {
 text-decoration: none;
 color: #f2f2f2;
 font-size: 16px;
}

#navdiv ul li {
 list-style-type: none;
 float: right;
 position:relative;
  display:inline;
  background-color: red;
  line-height: 29px;
  margin-top: 16px;
  margin-right: 10px;
}

#navdiv ul li:hover .slider {
 border-bottom: 5px solid #FF9933;
 transition: all 0.3s ease-in-out;
 width: 100%;
}

#highlight {
 display: inline-block;
 line-height: 1em;
 padding: 0;
 border-bottom: 5px solid #FF9933;
}

#navdiv img {
 width: auto;
 max-width: 100%;
}

<nav>
  <div id="Maindiv">
    <div id="navdiv">
       <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <ul>
            <li>
              <a href="../blog/index.html">Item 5</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../contactos/index.html">Item 4</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../serviços/index.html">Item 3</a>
              <span class="slider"></span> 
            </li>
            <li>
              <a href="../quem_somos/index.html">Item 2</a>
              <span class="slider"></span>
            </li>
            <li id="highlight">
              <a href="../home/index.html">Item 1</a>
              <span class="slider"></span>
            </li>
      </ul>
      </div>
    </div>
  </div>
</nav>

My only problem is that when I add a `div` inside the `ul` to only target the `li`, my items go below the navigation bar and the padding won't work. I'm definitely doing something wrong, just don't know what. [Demo Example](https://codepen.io/Kayonne/pen/yoyOKN) — Kayonne, Jul 25 '17 at 09:46
Added a snippet with an example, hopefully it's more along the lines of what you are looking for :) — TripWire, Jul 25 '17 at 20:57
It's exactly what I'm looking for! Now the border-bottom effect doesn't take the whole padding of that element but rather it's content like `item`, `item1`, `item2` and so on! Gonna take a closer look at your code to decipher what you did differently. Thanks a bunch!!! — Kayonne, Jul 26 '17 at 00:07
PS: Is it just me or is the `highlight`effect simply not working inside the `span`? — Kayonne, Jul 26 '17 at 00:13
highlight will only show when the span has a width, so that could be why the highlight effect has no bearing with the current code. Because the spans width starts at 0 and then increases to give you the animation which highlights the item you are hovering over. — TripWire, Jul 26 '17 at 00:27
Yea, that is exactly what I thought the animation was doing with those `widths`. What I want the `highlight` to do is to select the `current page` the user is viewing without having the slider animation overlapping it or at least blind to the eye. — Kayonne, Jul 26 '17 at 01:15
I have edited the code above slightly to add the id highlight to the li element as the width will be always the size of the list item. You might consider using class instead of id here as this is a reusable style as opposed to some way to reference a specific HTML element. — TripWire, Jul 26 '17 at 01:21
I'll make that adjustment alongside with the rest of your code. If things work as I want them to, the navbar is going to look sexy :) Thanks for all the help Chelsea! — Kayonne, Jul 26 '17 at 01:26

How to make border-bottom animation & ignore padding

2 Answers2