Как разместить границу вверху?

Question

Это должно быть просто, но я не знаю как. Я хочу, чтобы класс .current добавлял границу к текущему элементу списка в меню навигации.

Я сделал это уже (пример: http://codepen.io/anon/pen/jARqOr) Но я хотел бы, чтобы у границы выровнены в верхней части заголовка, как в этом ИМАГ (красная граница):

Что мне делать, чтобы получить этот результат?

С нетерпением жду вашего ответа.

Спасибо.

Answer 1

Я не уверен, если это лучший решение, но это сработало:

ul li a.current { 
    padding-top: 50px; 
    margin-top: -55px; 
} 

Установка Маржа-сверху -55px (отрицательное значение отступа в заголовке сообщения) принимает его к началу , а затем добавление верхнего слоя 50px (55px - 5px для границы) приводит к тому, что текст будет ровным с другими элементами привязки.

Одной из проблем с этим решением является то, что все пространство над .current-якорем является частью области, на которую можно щелкнуть.

Answer 2

Вы могли бы попробовать что-то вроде этого:

ul .current a { 
    padding-top: 42px; 
    background: linear-gradient(to bottom, #005f37 0%,#005f37 100%); 
    background-size: 100% 7px; 
    background-repeat: no-repeat; 
    color: #006038; 
} 

Это работает для меня

Answer 3

Я не видел ваш комментарий

черный Photoshop

в любом случае этот код просто использовать CSS ,

see output you want just using CSS

- CSS -

ul li a.current { 
      border-top: 4px solid #000; 
      /*box-shadow: 0px -5px 0px black;*/ 
      padding :0px 5px 5px 5px; 
      color: red!important; 
    } 

    ul li a.current span { 
      padding:5px 0px ; 
      border-top: 2px solid red; 
      /*box-shadow: 0px -2px 0px red;*/ 

    } 

--- тот же самый размер двойной границы затем использовать этот CSS вместо

ul li a.current { 
     box-shadow: 0px -5px 0px black, /* add as many as you want */ 
     inset 0px 2px 0px red; 
     padding:5px; 
     color: red!important; 
    }