在活动列表项的底部添加边框

Question

我需要在链接活动列表项的底部添加边框。我想稍微移动左侧的边框。我试图添加skew.but skew not working。 我想添加边框，如图

所示

#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

只需在元素的左侧添加填充，使其向右延伸。这是我编辑的内容：

#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;
}

以下是Border Fiddle

的样子

以下是关于边界切割的一些好问题（剧透，你不能）：Border Cutting，Skewing Borders with CSS

Answer 2

这是您的解决方案

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%;
}