[Решено] Граница с треугольником

Опытные мастера, поделитесь советом. Нужно сделать на пунктах главного меню нижнюю границу с треугольником при наведении. Какими средствами CSS можно этого добиться? background-image действует до границы, ниже -нет.

 

HTML:

    <div class="test">
        Варианты вывесок
    </div>

    <style>
        .test:hover {
            border-bottom: 2px solid orange;
            position: relative;
            display: inline;
        }
        .test:hover:after {
            content: '';
            position: absolute;
            left: calc(50% - 5px);
            bottom: -10px;
            border: 5px solid transparent;
            border-top: 5px solid orange;
        }
    </style>