使用伪元素生成下划线表示选中状态的方法

下划线

如上图——
列表li元素，需要使用下划线表示选中状态。使用border只能和li相同宽度。限制很大，不方便，而且如果缩小li的长度，可点击范围也会变小。
新加一个元素画出下划线，在用js控制选中状态时不方便选择。

怎么在不添加元素，只添加li的class的情况下，做出下划线，用到伪元素【:after】方法。

        #tabsContainer ul .actived:after{
            content: "";
            display: block;
            position: relative;
            bottom: 0;
            left: 10%;
            width: 80%;
            height: 2px;
            background: #3a8be9;
        }

这样只需要控制li的class就可以控制active状态。式样长度也可以随意更改，需要上划线只需要把after变成before。