Стили оформления списков на Blogger

Я много писала об оформлении списков, как нумерованных, так и маркированных. Но вновь нахожу в интернете яркие, необычные или, наоборот, скромные, но с изюминкой стили оформления списков. Вот и сегодня, вновь оформляем списки. Почитать о других стилях:

Цифры с наклоном

Обычный вид оформления с небольшой изюминкой — наклон цифр. Добавляем код в шаблон, выше тега ]]></b:skin>.

Цвет можно поменять на свой.

Цвет круга в коде выделила синим

Цвет цифр — красным

Код:

ol {
max-width: 350px;
counter-reset: my-awesome-counter;
list-style: none;
padding-left: 40px;
line-height: 32px;
}
ol li {
margin: 0 0 0.5 rem 0;
counter-increment: my-awesome-counter;
position: relative;
}
ol li::before {
content: counter(my-awesome-counter);
color: #ffffff;
font-size: 1.8 rem;
font-weight: bold;
position: absolute;
--size: 32px;
left: calc(-1 * var(--size) - 10px);
line-height: var(--size);
width: var(--size);
height: var(--size);
top: 0;
transform: rotate(-10deg);
background: sienna;
border-radius: 50%;
text-align: center;
box-shadow: 1px 1px 0 #999;
}

Оформление с линией

У второго кода оформления списков имеется линия отбивки. Так же можно менять цвет круга. К тому же можно сделать квадратные маркеры или с закруглёнными углами.

Добавляем код в шаблон, выше тега ]]></b:skin>.

Красным в коде выделила цвет отбивки

Синим — ширина полосы отбивки

Зелёным — цвет маркера

Оранжевым — ширину круга

Голубым — процент скругления углов:

50% круглый

0% - квадратный

от 5% до 45% сила скругление углов

ol {
list-style-type: none;
counter-reset: num;
margin: 0 0 0 60px;
padding: 15px 0 5px 0;
font-size: 16px;
position: relative;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
line-height: 1.9;
}
ol li:before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -55px;
width: 28px;
height: 28px;
background: #fff;
color: #000;
text-align: center;
line-height: 28x;
font-size: 18px;
border-radius: 0%;
border: 2px solid #3232ec;
}
ol:before {
content: '';
position: absolute;
top: 15px;
bottom: 15px;
left: -15px;
width: 1px;
border-left: 2px solid #3232ec;
}