Decorate Ordered Numbered list CSS

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>

Latest posts by Prof. Fazal Rehman Shamil (see all)

Buy advertisement space on T4Tutorials

For more details email [email protected]