html - 定位一个伪元素 li :after beyond li

Question

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

我需要在每个 <li> 下面添加一个小文本

不幸的是，我无法添加 html 元素，因为它是 native CMS 菜单(我可以进行覆盖，但我想找到其他方式)。

所以这是我所做的:

演示: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 伪元素定义所有样式属性一次。

---

结果截图: