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

我需要添加下面的每个<li>

小文不幸的是，因为它是一个天然的CMS菜单我不能添加HTML元素（我可以做出超越，但我想找到一个其他的方式）。

所以这里是我做了什么：

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

你知道有没有更好的方法？

来源

2014-09-02 Sébastien Gicquel

尝试了这种方式：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 pseudoelement定义所有样式属性一次。

得到的截图：

enter image description here

来源

2014-09-02 10:39:34 fcalderan

完美。我以前曾用'display：block'尝试过，但由于高度固定，因此未显示元素。用'min-height'，没关系。 – 2014-09-02 12:37:50

-1

你必须使用jQuery的可以进行追加的跨度和插入span标签文本。这也将有助于动态内容。

来源

2014-09-02 10:48:36 user3074446

我也想过这个解决方案，但我更喜欢只使用CSS。 – 2014-09-02 12:30:10

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

回答

相关问题