Добавить пустое пространство между содержимым div и нижней границей

Я пытаюсь добавить нижнюю границу в div с целью создания панели навигации. Эффект, который я пытаюсь достичь:

В настоящее время у меня есть следующий код:

$("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; 
  }

    .container .item a.current {
      border-bottom: 2px solid red;  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  
  <div class="item">
    <a class="current" href="#">Page 1</a>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>

Ответ 1

В настоящее время вы не можете этого сделать. Вы не можете добавить разрыв между элементом и собственной границей. Однако вы можете добавить границу к ее родительскому элементу (в этом случае элемент div.item), а затем добавить padding-bottom к тому же самому элементу, чтобы отделить его от элемента a:

$("a").click(function() {
  
  $(".current").removeClass("current");
  
  $(this).parent().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; 
  }

    .container .item.current {
      border-bottom: 2px solid red;  
      padding-bottom: 4px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  
  <div class="item current">
    <a href="#">Page 1</a>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>

Ответ 2

демо

new css:

.container {
}

.container .item {
  float: left;
  list-style-type: none;
  margin: 0 1px;
  border-bottom: 8px solid red;  
}

  .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; 
          border-bottom: 4px solid white;  
  }

    .container .item a.current {
    }

Ответ 3

Еще одна версия с использованием псевдоэлемента :after. В отличие от других ответов, это поместит белую границу внутри элемента, а не вытеснит зеленый дальше снаружи.

Интересные части, которые я добавил/изменил:

.container .item a {
    ...
    position: relative;
}
.container .item a.current:after {
    content:'';
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 2px;
    width: 100%;
    background-color: #FFF;
}

И вот демо:

$("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;
    position: relative;
}
.container .item a.current {
    border-bottom: 2px solid red;
}
.container .item a.current:after {
    content:'';
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 2px;
    width: 100%;
    background-color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">      
  <div class="item">
    <a class="current" href="#">Page 1</a>
  </div>
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  <div class="item">
    <a href="#">Page 3</a>
  </div>
</div>

Ответ 4

Не уверен, что это то, что вы хотите. Попробуй это. Я добавил div с полем класса. Это также можно сделать с помощью css после метода.

$("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;  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  
  <div class="item">
    <a class="current" href="#">Page 1</a>
    <div class="box"></div>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>