Friday, 13 May 2023 21:16
Как сделать список ul->li в CSS русскими буквами и с продолжением в новых строках
К примеру мы имеем такой список ul li
<ol>
<li>Москва</li>
<li>Вильнюс</li>
<li>Хьюстон</li>
<li>Буратино</li>
<li>Гротеск</li>
</ol>
<ol>
<li>Америка</li>
<li>Китай</li>
<li>Индия</li>
<li>Таиланд</li>
<li>Украина</li>
</ol>
Javascript
// прописываем необходимые буквы в переменную
var letters = "абвгдежзиклмнопрстуфхцчшщэюя";
$.each($('ol'), function() {
var item = $(this).find('li');
item.each(function(i){
$(this).attr("russ", letters[i] + ")");
});
});
Прописываем стиль
ol {
list-style-type: none;
}
ol > li::before {
display: inline-block;
content: attr(russ);
width: 1.2rem;
margin-left: -2rem;
}