Custom list style via clean css
How do I make an custom list style via clean css?
Custom list style via clean css. What is a custom list style via clean css? How do you make a custom list style via clean css? This script and codes were developed by Serluck on 02 September 2022, Friday.
Custom list style via clean css - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom list style via clean css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ol> <li>list 12</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li>
</ol>
</body>
</html>
Custom list style via clean css - Script Codes CSS Codes
ol { counter-reset: list -0; /*start from 0,1,2,3... name List - customize*/
}
ol li { list-style-type: none; position: relative; margin: 25px 0; line-height: 25px; padding-left: 50px;
}
ol li:before {
content: counter(list) "";
counter-increment: list;
display: block;
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 37px;
margin-right: 4px;
background: url(data:image/png;base64,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);
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: #fff;
text-align: center;
}
Developer | Serluck |
Username | serluk |
Uploaded | September 02, 2022 |
Rating | 3 |
Size | 3,772 Kb |
Views | 26,312 |
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!
Name | Size |
Transfer product to cart | 2,033 Kb |
Sticky on scroll jquery | 1,581 Kb |
Css text gradient | 1,833 Kb |
Price table | 5,928 Kb |
Modal window clean css | 2,102 Kb |
Custom checkbox | 1,581 Kb |
Replace url via jquery | 1,429 Kb |
Triangle on pure css3 | 1,408 Kb |
Sticky footer absolute | 1,510 Kb |
Toggle menu without height css3 | 1,570 Kb |
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!
Name | Username | Size |
NeeilTimer | Neeilan | 2,836 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Button Option Group | Honchoman | 1,859 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!