add the border in bottom of the active list item

Question

I need to add border in bottom of the link active list item.I want to move the border in left side a little bit.I habe tried to add skew.but skew not working. I want to add the border as shown in image

#sorting ul li{
      display: inline;
      padding:0 10px;
}
#sorting ul li a{
color:#000000; 
text-decoration:none;
}
#sorting ul li a.active{
color:#17A2F3;
border-bottom:1px solid red;
box-shadow: 0px 5px 1px -5px magenta;
/*-ms-transform: skewX(-20deg); 
 -webkit-transform: skewX(-20deg); 
  transform: skewX(-20deg); */
font-weight:bold;
}
#sorting p{
 font-weight:bold;
}
.sortHeader{
 position: relative;
    float: right;
    z-index: 90;
}
.search-results-wrapper div#tabs{
 padding-top:20px;
}
#sorting .item-list,#sorting .item-list ul,#sorting p{
 display:inline;
}

<div id="sorting" class="panel-collapse collapse in">
Sort By
                         <div class="item-list"> <ul><li class="first"><a href="#"class="active">Relevancy</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Author</a></li>
<li><a href="#">Date</a></li>
<li class="last"><a href="#">Group</a></li>
</ul></div> 
                        </div>

Answer 1

Just add a padding to the left side of the element so it stretches out to the right. Here is what I edited:

#sorting ul li a.active{
color:#17A2F3;
border-bottom:1px solid red;
box-shadow: 0px 5px 1px -5px magenta;
/*-ms-transform: skewX(-20deg); 
 -webkit-transform: skewX(-20deg); 
  transform: skewX(-20deg); */
font-weight:bold;
padding-left:10px;
}

Here is the fiddle of how it looks Border Fiddle

Here are some good question regarding border cutting (spoiler, you can't): Border Cutting, Skewing Borders with CSS

Answer 2

Here is your solution

https://jsfiddle.net/parthjasani/gp5o2dun/

#sorting ul li a.active:after{
   color: #17A2F3;
   border-bottom: 2px solid red;
   font-weight: bold;
   content: "";
   position: absolute;
   bottom: -4px;
   left: -6px;
   width: 100%;
}