动态改变：after选择器的高度

Question

我尝试使用CSS或jQuery动态更改伪选择：after 的高度，但是我不知道这是我的代码：

html

<ul>
  <li>laravel <span data-perc='100'></span>
</li>

css

.skills ul li span:after{
    content: '';
    position: absolute;
    width: 8px;
    bottom: 0px;
    background-color: #ff6600;
    outline: 2px solid #000;
    outline-offset: 0px;
    height: attr(data-perc px);
}