如何使用jQuery更改：after伪类的背景颜色？

Question

在我的WordPress自定义主题的“我的帐户”页面上，我想显示选项卡式内容。我的html代码在这里。

<ul class="nav nav-tabs">
<li class="btn active"><a data-toggle="tab" href="#videos" >Videos</a></li>
<li class="btn"><a data-toggle="tab" href="#tools" >Tools</a></li>
<li class="btn"><a data-toggle="tab" href="#articles" >Articles</a></li>

<div class="tab-content clearfix">
        <div class="tab-pane active" id="videos">


<h5>tab 1 content goes here</h5>
        </div>
        <div class="tab-pane" id="tools">


<h5>tab 2 content goes here</h5>
        </div>
        <div class="tab-pane" id="articles">


<h5>tab 3 content goes here</h5>
        </div>

    </div>
</div>

我为每个li btn类使用了CSS偏斜来设计标签标题。每个li的右侧的偏斜效果为like this，借助：after类的帮助，而每个li类.btn在CSS中。虽然：after的背景色设置为灰色，但我希望活动li的：after伪类的背景色为白色，以便可以与制表符颜色匹配。我的CSS代码在这里。

.nav-tabs > li {
float: left;
margin-bottom: -1px; 
}

.nav-tabs > li > a {
    margin-right: 40px;
    padding: 3px 8px 3px 8px;
    line-height: 1.42857143;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    background-color: #908686;
    color: black;
    font-weight: bold;
    text-decoration: none;
    }

.nav-tabs > li > a:hover {
background-color: white;
}

.nav-tabs > li.active > a {
color: #555555;
background-color: #FFF5EE;
border-bottom: 2px solid black;
cursor: default;
}

.tab-content > .active {
display: block;
font-size: 16px;
}

.btn:after {
content: " ";
position: absolute;
display: block;
width: 65px; margin-left: 6px;
height: 88%; top: 0; left: 0;
z-index: -1;
background: #908686;
transform-origin: top right;
transform: skew(30deg, 0deg);
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

我使用以下jQuery代码为当前单击的选项卡及其相关内容分配活动类。

$(document).ready(function() {
    $('.nav-tabs > li > a').click(function(event){
        event.preventDefault();//stop browser to take action for clicked anchor

        //get displaying tab content jQuery selector
        var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');                  

        //find actived navigation and remove 'active' css
        var actived_nav = $('.nav-tabs > li.active');
        actived_nav.removeClass('active');


        //add 'active' css into clicked navigation
        $(this).parents('li').addClass('active');
        $(this).parents('li').addClass('hidden');


        //hide displaying tab content
        $(active_tab_selector).removeClass('active');
        $(active_tab_selector).addClass('hide');

        //show target tab content
        var target_tab_selector = $(this).attr('href');
        $(target_tab_selector).removeClass('hide');
        $(target_tab_selector).addClass('active');
    });
});

我的问题是，当悬停或单击任何选项卡时，我想更改：after伪类的背景色，以便它可以与实际li.btn的背景色匹配，而两个其余两个无效标签页及其相关的：after伪类保持灰色。

有没有办法使用CSS或jQuery更改：after伪类的背景颜色，以便它可以匹配我当前活动的选项卡的颜色？