Html 位置a伪元素li：超越li之后

我有一份菜单，上面有ul列表

我需要在每个

不幸的是，我不能添加html元素，因为它是一个原生CMS菜单（我可以进行覆盖，但我想找到其他方法）

以下是我所做的：

演示：

我应用一个

位置：相对

到

和

位置：绝对至
li:after

HTML

你知道有没有更好的方法吗？
试着这样做：

实际上不需要使用
相对/绝对
位置将文本放置在新行中

对列表项使用
min height
而不是
height
。还要定义一次
：pseudo元素之后的所有样式属性


结果屏幕截图：

您必须使用jquery追加span并在span标记中插入文本。这对动态内容也有帮助。
我也想到了这个解决方案，但我更喜欢只使用CSS.Perfect。我以前尝试过使用
display:block
，但由于高度固定，因此没有显示元素。使用
最小高度
，就可以了。
<ul>
    <li class="item-131">text 1</li>
    <li class="item-132">text 2</li>
    <li class="item-133">text 3</li>
</ul>

ul {
    font-size: 16px;
}
ul li {
    height: 15px;
    line-height: 15px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 5px 20px 5px 5px;
}
.item-131 {
    position: relative;
}
.item-131:after {
    content:"small text 1";
    font-size: 13px;
    color: #88857d;
    position: absolute;
    top:15px;
    left:5px;
    width: 100%;
}
.item-132:after {
    content:"small text 2";
    font-size: 13px;
    color: #88857d;
    width: 100%;
}
.item-133:after {
    content:"small text 3";
    font-size: 13px;
    color: #88857d;
}

ul {
    font-size: 16px;
}

ul li {
    min-height: 15px;
    line-height: 15px;
    margin: 0 auto;
    padding: 5px 20px 5px 5px;
}

ul li:after {
    font-size: 13px;
    color: #88857d;
    width: 100%;
    display: block;
}


.item-131:after { content:"small text 1"; }
.item-132:after { content:"small text 2"; }
.item-133:after { content:"small text 3"; }