Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

Всем привет!
В сегодняшней статье я расскажу, как поменять стандартную нумерацию в списке на свой стиль, используя CSS.
Все вы знакомы с тегом <ol> в HTML и прекрасно знаете, о какой нумерации я говорю.
Если вы не догадываетесь, тогда ознакомьтесь вот с этой статьей.

Итак, поменяем небольшим кодом CSS внешний вид нумерации списка.

Стандартный код в HTML списка:

<ol>
<li> BlogGood.ru </li>
<li> StepkinBLOG.ru </li>
<li> web-reactive.com</li>
</ol>

Результат:

1. BlogGood.ru
2. StepkinBLOG.ru
3. web-reactive.com

Если добавите вот такой CSS код:

ol{
counter-reset: myCounter;
}

li{
list-style: none;
}

li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}

В результате на экране вы увидите симпатичные квадратики:

Можно и заменить квадратики на круги, используя правила  border-radius:

ol{
counter-reset: myCounter;
}

li{
list-style: none;
}

li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50px;
}

В результате вы увидите:

И напоследок приятный бонус код.

В CSS:

ol {
counter-reset:myCounter;
margin-left:0;
padding-left:5px;
color: rgb(100,100,100);
}

li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

li:hover {
color: rgb(0,0,0);
}

li:before {
content:counter(myCounter);
counter-increment:myCounter;
position:absolute;
top:0;
left:0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding:0px;
color:#fff;
background:#2980b9;
font-weight:bold;
text-align:center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

li:hover:before {
background-color: #2ecc71;
}

li li:before{
background-color: #3498db;
}

li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(203, 203, 203);
z-index: 0;
}

li:hover:after {
background-color: #2ecc71;
}

li li {
font-size: 0.8em;
}

В HTML:

<h1>Рецепт</h1>
<ol>
<li>
В большой сковороде разогрейте растительное масло.
</li>
<li>
В большой миске смешайте ингредиенты:
<ol>
<li>5 тертых картофелин</li>
<li>2 яйца (взбить)</li>
<li>1 луковица</li>
<li>3 ст.л. муки</li>
<li>соль и перец по вкусу</li>
</ol>
</li>

<li>
Выкладывайте картофельное тесто большой ложкой на сковороду и слегка прижмите оладьи лопаточкой. Жарьте примерно 4 минуты с каждой стороны, пока не подрумянятся.
</li>
<li>
Сразу подавайте на стол
</li>
</ol>

В результате:

Буду рад, если эта информация была вам полезной!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Один ответ на комментарий - Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

1. irmaseo.ru

   26.02.2020 в 10:11

   очень полезная информация

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, для сайта