Decorate Ordered Numbered list CSS

By: Prof. Fazal Rehman Shamil
Last modified on January 15th, 2020

Decorate Ordered Numbered list CSS

This is the code of decorating the ordered list in CSS. You can write the code according to your own choice. We need to set the CSS for each of the ol and li tags.

Decorate Ordered Numbered list CSS
Figure: Decorate Ordered Numbered list CSS

Code of Decorating the Ordered Numbered list CSS

<!DOCTYPE html>
<html>
<head>
<style>

ol {
max-width: 300px;
counter-reset: my-awesome-counter;
list-style: none;
padding-left: 50px;
}
ol li {
margin: 0 0 0.5 rem 0;
counter-increment: my-awesome-counter;
position: relative; padding-top: 7px;

}
ol li::before {
content: counter(my-awesome-counter);
color: #fcd000;
font-size: 1.5rem;
font-weight: bold;
position: absolute;
–size: 28px;
left: calc(-1 * var(–size) – 10px);
line-height: var(–size);
width: var(–size);
height: var(–size);
top: 0;
transform: rotate(-20deg);
background: green;
border-radius: 50%;
text-align: center;
box-shadow: 3px 3px 0 black;
}

body {
}

</style>
</head>
<body>

<ol>
<li>T4Tutorials</li>
<li>T4Tutorials B</li>
<li>T4Tutorials C</li>
<li>T4Tutorials D</li>
</ol>

</body>
</html>

Prof. Fazal Rehman Shamil