Colored Numbers for Ordered List

Developer
042
Size
2,352 Kb
Views
8,096
  1. Colored Numbers for Ordered List Previews
  2. Colored Numbers for Ordered List HTML Codes
  3. Colored Numbers for Ordered List CSS Codes
  4. Colored Numbers for Ordered List JS Codes

How do I make an colored numbers for ordered list?

What is a colored numbers for ordered list? How do you make a colored numbers for ordered list? This script and codes were developed by 042 on 09 January 2023, Monday.

Colored Numbers for Ordered List Previews
IQ Test

Colored Numbers for Ordered List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colored Numbers for Ordered List </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content"> <ol> <li>Lorem Ipsum</li> <li>Lorem Ipsum <br />Line 2</li> <li>Lorem Ipsum</li> <ol> <li>Works for nested lists</li> <li>Lorem Ipsum <br />Line 2</li> <li>Lorem Ipsum</li> </ol> </ol>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Colored Numbers for Ordered List - Script Codes CSS Codes

body { width: 720px;
}
ol { counter-reset: li; list-style: none; *list-style: decimal; font: 14px 'Trebuchet MS', 'Arial'; padding: 0;
}
ol ol { margin: 0 0 0 1.5em;
}
ol li { line-height: 2em;
}
ol li span { position: relative; display: block; padding-left: 2em; color: #444;
}
ol li span:before { content: counter(li) "."; counter-increment: li; position: absolute; top: 0; left: -.5em; height: 2em; width: 2em; text-align: right; font-weight: bold; color: #339966;
}

Colored Numbers for Ordered List - Script Codes JS Codes

$('#content ol li').wrapInner('<span />');
Colored Numbers for Ordered List - Script Codes
Colored Numbers for Ordered List - Script Codes
Home Page Home
Developer 042
Username 042
Uploaded January 09, 2023
Rating 3
Size 2,352 Kb
Views 8,096
Do you need developer help for Colored Numbers for Ordered List?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

042 (042) Script Codes
Name
Fixed responsive layout
Animating characters with jQuery
JCycle2 with HammerJS
The Singapore Flag using Pure CSS
Custom HTML Nested List Counters
Vertical Sprite with Greensock TweenMax
Custom Kakao Share Button
A Pen by 042
Scrolling through cards with stepper
SR_02
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!