CSS Dot Leaders

Developer
Casey Hunt
Size
2,803 Kb
Views
115,368
  1. CSS Dot Leaders Previews
  2. CSS Dot Leaders HTML Codes
  3. CSS Dot Leaders CSS Codes

How do I make an css dot leaders?

CSS only dot leaders styled intelligently with SASS + fancy HR rules using CSS. RE: http://www.w3.org/Style/Examples/007/leaders.en.html. What is a css dot leaders? How do you make a css dot leaders? This script and codes were developed by Casey Hunt on 19 November 2022, Saturday.

CSS Dot Leaders Previews
IQ Test

CSS Dot Leaders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Dot Leaders</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="container"> <h1> Normalish Food </h1> <ul class="leaders"> <li> <span>Grilled Cheese</span> <span>7.95</span> </li> <li> <span>Wonton Soup</span> <span>8.95</span> </li> <li> <span>Waffles</span> <span>7.95</span> </li> <li> <span>Shrimp Etouffee</span> <span>15.25</span> </li> <li> <span>Miso Ramen</span> <span>10.95</span> </li> </ul> <hr class="fancy-rule asterism"> <!--<hr class="fancy-rule asterism rgba">--> <h1> Delicacies </h1> <ul class="leaders"> <li> <span>Bear Foot Soup</span> <span>7.95</span> </li> <li> <span>Fried Raptor Eggs</span> <span>24.95</span> </li> <li> <span>Raspberry Asparagus Creme Brulée</span> <span>13.95</span> </li> </ul>
</section>
</body>
</html>

CSS Dot Leaders - Script Codes CSS Codes

@charset "UTF-8";
/* * * * * * * * * * *
* Dot Leader
* * * * * * * * * * * */
ul.leaders { max-width: 37em; padding: 0; overflow-x: hidden; list-style: none;
}
ul.leaders li:before { float: left; width: 0; white-space: nowrap; color: #a33131; content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.leaders span:first-child { font-weight: 600; letter-spacing: 2px; padding-right: 0.33em; background: #c55;
}
ul.leaders span + span { float: right; padding-left: 0.33em; background: #c55;
}
ul.leaders span + span:before { content: '$'; padding-right: 0.15em;
}
.fancy-rule { border: none; width: 600px; overflow: hidden; height: 20px; text-align: center; color: #a33131;
}
.rgba { color: rgba(0, 0, 0, 0.15);
}
.fancy-rule.asterism:before { content: "o————|| ⧖ ||————o"; letter-spacing: -1px;
}
/* Page setup & Styling */
*::selection { background-color: #1a1a1a; color: aliceblue;
}
body { background-color: #c55; color: #feca1e; font-family: 'Avenir Next', sans-serif;
}
section { position: absolute; left: calc(50% - 14em); width: 38em;
}
CSS Dot Leaders - Script Codes
CSS Dot Leaders - Script Codes
Home Page Home
Developer Casey Hunt
Username caseymhunt
Uploaded November 19, 2022
Rating 4.5
Size 2,803 Kb
Views 115,368
Do you need developer help for CSS Dot Leaders?

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!

Casey Hunt (caseymhunt) Script Codes
Name
Background Color Switcher
Cool Form Labels
Neural Colors
JQuery Time Range Slider
Super cool hover section links
Shaun Spills
CSS Only radio image label
A Pen by Casey Hunt
Headroom.js Test
RoundUp Rumble 2015
Create amazing Facebook ads 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!