Css counters

Developer
Hamza Erbay
Size
2,215 Kb
Views
40,480
  1. Css counters Previews
  2. Css counters HTML Codes
  3. Css counters CSS Codes

How do I make an css counters?

What is a css counters? How do you make a css counters? This script and codes were developed by Hamza Erbay on 12 June 2022, Sunday.

Css counters Previews
IQ Test

Css counters - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css counters</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <h3>Default order list</h3> <ol> <li>Development</li> <li>Business</li> <li>IT & Software</li> <li>Office Productivty</li> </ol>
</div>
<div> <h3>Custom order list</h3> <ol class="custom-order"> <li>Development</li> <li>Business</li> <li>IT & Software</li> <li>Office Productivity</li> </ol>
</div>
<a href="http://www.w3schools.com/cssref/pr_list-style-type.asp" target="_blank">w3schools</a>
</body>
</html>

Css counters - Script Codes CSS Codes

body { padding: 20px; font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: rgba(0, 0, 0, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex;
}
div { width: 50%;
}
.custom-order { list-style: none; counter-reset: listCounter; padding-left: 1em;
}
.custom-order li { padding-left: 1em; counter-increment: listCounter; margin-bottom: 1em;
}
.custom-order li:before { content: counter(listCounter, decimal-leading-zero); font-size: 0.7em; font-weight: bold; color: #0eadad; margin-left: -2.5em; float: left;
}
Css counters - Script Codes
Css counters - Script Codes
Home Page Home
Developer Hamza Erbay
Username hamzaerbay
Uploaded June 12, 2022
Rating 3
Size 2,215 Kb
Views 40,480
Do you need developer help for Css counters?

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!

Hamza Erbay (hamzaerbay) Script Codes
Name
Old Course Cards
Flexbox experiment
Display properties
Udemy page transitions
Badge
Instagram stories loader
Quickviewbox
Position
Square Checkbox
Custom selectbox
Create amazing blog posts 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!