定位一個僞元素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之後

回答

相關問題