定位一个伪元素li：超越li之后

Question

我有一个带有ul列表的菜单。

我需要在每个<li>

下面添加一个小文字

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

所以这就是我所做的：

DEMO：http://jsfiddle.net/Vinyl/6dcnztax/

我将position: relative;应用于<li>，将position: absolute;应用于li:after

HTML

<ul>
    <li class="item-131">text 1</li>
    <li class="item-132">text 2</li>
    <li class="item-133">text 3</li>
</ul>

CSS

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

你知道是否有更好的方法吗？

Answer 1

以这种方式尝试：http://jsfiddle.net/xyr1b29q/1/

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

确实无需使用relative/absolute位置将文字放入新行。

使用min-height代替height作为列表项。还要为:after伪元素定义所有样式属性一次。

---

结果截图：

Answer 2

您必须使用jquery附加span并在span标记中插入文本。这也有助于动态内容。