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 (Available for Professional Discussions)
1. Message on Facebook page for discussions,
2. Video lectures on Youtube
3. Email is only for Advertisement/business enquiries.