JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container" style="margin-top:  20px">
    <div class="row">
        <div class="col-md-2" style="width: 300px /* width there only for pretty demo */">
            <ul class="nav nav-pills nav-stacked custom-nav-stacked">
                <li class="active"><a href="#">A long long text</a></li>
                <li><a href="#">Small text</a></li>
                <li class="active"><a href="#">A long long long long long long long long long text</a></li>
                <li><a href="#">Small text 111</a></li>
            </ul>            
        </div>
    </div>
</div>

CSS

.custom-nav-stacked > li > a {
    border-radius: 2px;
}
.custom-nav-stacked > li.active > a:after,
.custom-nav-stacked > li.active > a:hover:after,
.custom-nav-stacked > li.active > a:focus:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -19px;
    /*margin-left: -1px;*/
    border-top: 19px solid transparent;
    border-left: 13px solid #428bca;
    border-bottom: 19px solid transparent;
}