Add empty space between div's content and bottom border

Question

I am attempting to add a bottom border to a div for the purpose of a navigation bar. The effect I am trying to achieve:

Answer 1

Not sure whether this is what you want. Try this. I added a div with class box. This also can be done using css after method.

$("a").click(function() {
  
  $("a").removeClass("current");
  
  $(this).addClass("current");
  
  });

.container {
}

.container .item {
  float: left;
  list-style-type: none;
  margin: 0 1px;
}

  .container .item a {
    color: black;
    text-decoration: none;
    background-color: green;
    width: 50px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    height: 40px; 
  }

    .box {
      margin-top:2px;
      height: 2px;
      background-color:red;  
    }

  
  

    Page 1
    

  
  
  

    Page 2
  
  
  

    Page 3
  
  
  

    Page 4
  
  
  

    Page 5
  
  
  

    Page 6