如何修改sidenav中的活动突出显示

Question

我有一些带有一些菜单项的sidenav，现在我有一个应用于当前li的活动类，它会突出显示背景颜色的li（在这种情况下：＃3596d5）。

我不应该突出显示整个li，而应该只是在文本左侧的一个小部分（大约10个像素）突出显示，我想不出有任何方法可以做到这一点。

以下是我要寻找的photoshop结果：

我目前的HTML：

<nav class="nav-primary">
    <ul class="nav nav-main">
        <li class="active">
            <a class="auto nav-item text-white" href="#">
                <span>Home</span>
            </a> 
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 2</span>
            </a>
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 3</span>
            </a>
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 4</span>
            </a>
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 4</span>
            </a>
        </li>
    </ul>
</nav>

我目前的CSS：

.text-white {
    color: white;
}
.nav-primary ul.nav > li > a {
    padding: 15px
}
nav {
    background-color: black;
}
.active {
    background-color: #3596d5;

}

我的jsfiddle是here（这是使用bootstrap外部资源）

任何帮助都将不胜感激。

Answer 1

将此添加到您的CSS：

.active {
    background-color: #000; border-left:5px solid #069;
}

see fiddle

Answer 2

您可以使用渐变背景：

 background: linear-gradient(to right, rgba(30, 87, 153, 1) 0px, rgba(32, 124, 202, 1) 10px, rgba(0, 0, 0, 1) 11px, rgba(0, 0, 0, 1) 100%);

http://jsfiddle.net/vtp7omx2/1/

Answer 3

你可以像这样使用::

.active::before{
    content: ' ';
    width: 10px;
    height: 50px;
    background-color: #3596d5;
    display: inline-block;
    position: absolute;
}

请参阅小提琴http://jsfiddle.net/vtp7omx2/3/