Я пытаюсь стилизовать числа в упорядоченном списке, я хотел бы добавить цвет фона, радиус границы и цвет, чтобы они соответствовали дизайну, над которым я работаю:
Я думаю, это невозможно, и мне придется использовать разные изображения для каждого числа, т.е.
ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');}
etc...
Есть ли решение попроще?
html
css
html-lists
sprite
Pixelomo
источник
источник
Ответы:
Вы можете сделать это с помощью счетчиков CSS в сочетании с
:before
псевдоэлементом:ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; }
<ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>
источник
counter-reset: item;
должен находиться в блоке ol, иначе счетчик не будет сброшен во вложенном <ol>.li
элемента занимает больше одной строки?50%
forborder-radius
(а не100%
). (См., Например, Lea Verou, « Любопытный случай border-radius: 50% », 30 октября 2010 г.)li
position: relative;
, а затем:before
вы дали бы это,position: absolute;
а затем использовалиtop
и,left
чтобы расположить его точно так, как вам нравится.Я искал что-то другое и нашел этот пример на CodePen;
попробуйте это: http://codepen.io/sawmac/pen/txBhK
body { font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, sans-serif; margin: 50px; } .custom-counter { margin: 0; padding: 0; list-style-type: none; } .custom-counter li { counter-increment: step-counter; margin-bottom: 5px; } .custom-counter li::before { content: counter(step-counter); margin-right: 20px; font-size: 80%; background-color: rgb(180, 180, 180); color: white; font-weight: bold; padding: 3px 8px; border-radius: 11px; }
<ol class="custom-counter"> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li> </ol>
источник