Issue о добавлении вниз треугольник к верхней границе

Question

Я пытаюсь добавить треугольник к верхней границе активного класса в This Demo

! [Введите описание изображения здесь] [2]

Я использую этот CSS правила:

.xxx a { 
    border-top: 3px solid #E1483F; 
} 
.xxx .active > a:after { 
    border-top: 12px solid #E1483F; 
} 

Но как вы можете видеть, я не получаю треугольник плюс элемента (CSS) движется вниз предыдущую позицию. Не могли бы вы дать мне знать, как это исправить?

Благодаря

Answer 1

Вы можете достичь его, как это:

JSFiddle - DEMO

.navbar-nav > li { 
    position: relative; 
    text-align: center; 
} 
.active:before { 
    content:" "; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 999; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 12px 12px 0 12px; 
    border-color: #E1483F transparent transparent transparent; 
}