Позиции псевдо элементов li: после 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 для списка. Также определите все свойства стиля для псевдоэлемента только один раз.

---

Результирующая скриншот:

Answer 2

Вы должны использовать JQuery для присоединять SPAN и вставить текст в тег диапазона. Это также поможет динамическому контенту.