Generate custom, hierarchical CSS counter-increment code for nested list numbering. Create complex outline numbering layouts instantly without manual styling.
AI Generation Prompt
CSS Counter Outline Generator Specification
Overview
A high-performance, browser-based utility that enables developers and technical writers to generate custom CSS for nested, multi-level numbering. The tool renders the CSS in real-time, allowing users to see their numbering structure before copying the code.
Core Features
- Dynamic Level Builder: Add or remove hierarchy levels (e.g., Level 1, Level 1.1, Level 1.1.a) with a simple 'plus' button interface.
- Style Selector: Per-level configuration for numbering types (Decimal, Lower-Alpha, Upper-Roman, etc.).
- Live Preview Window: A visual display that renders the generated numbering styles on a sample document snippet in real-time.
- Separator Configuration: Ability to define custom separators between levels (e.g., dots, dashes, brackets).
- Copy-to-Clipboard: One-click functionality to copy the generated CSS rules.
- Code Export: Cleanly formatted code snippet output.
User Interface & Layout
- Header: Clean, minimalist header featuring the tool title and a short explanation of use.
- Main Tool Area: A two-column split layout on desktop (or stacked on mobile):
- Left Pane (Configuration): A list of interactive cards representing each hierarchy level. Each card includes controls for style selection (select menu) and custom character input for separators.
- Right Pane (Preview & Output): A split pane containing a 'Visual Preview' (rendering the actual CSS) and a 'Code Output' box (read-only code block).
- Buttons: Primary actions (Generate, Reset, Copy) use a modern, button-based design with hover states.
Design System & Aesthetics
- Style: Professional, clean, light-mode 'SaaS' aesthetic.
- Color Palette:
- Background:
#f8fafc(Slate 50) - Cards/Containers:
#ffffff(White) with soft shadow (shadow-sm). - Primary Accent:
#4f46e5(Indigo 600) for buttons and active states. - Text:
#1e293b(Slate 800) for primary,#64748b(Slate 500) for secondary. - Borders:
#e2e8f0(Slate 200).
- Background:
- Interactions:
- Subtle fade-in animations when new levels are added.
- Micro-interactions on buttons (scale-down effect on active click).
- Toast notification style message on 'Copy Success' (using a custom modal element, not standard browser alert).
Technical Implementation Directives
- Architecture: Single HTML file including CSS and JS. No external build steps.
- No localStorage/Cookies: All app state must reside in volatile variables. The generator logic should compute CSS on-the-fly based on UI state.
- Browser Compatibility: Must function entirely within a sandboxed iframe. Do not use
window.alert()orlocalStorage. - Responsive Design: The two-pane layout must collapse to a vertical stack at screen widths below 768px.
- Dependencies: Use CDN links for any icons (e.g., FontAwesome or Lucide) and Google Fonts (Inter).
- Accessibility: Ensure all inputs have labels or aria-labels for screen readers.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Why use CSS counters instead of standard HTML ordered lists?
Standard HTML `<ol>` elements are limited to basic indentation and numbering styles, which often break when you need complex hierarchical layouts like '1.1.a'. CSS counters provide full control over the numbering logic, allowing you to create custom nesting structures that are completely decoupled from the document structure. This approach gives you total freedom to apply CSS styles to the numbers themselves, such as unique font weights, colors, or positioning, without affecting the text content of your list items.
Does the generated code require any JavaScript to function?
No, the code generated by this tool is pure CSS. It relies on the `counter-reset`, `counter-increment`, and `content: counter()` properties, which are standard features in all modern browsers. The generated CSS works natively in the browser engine, ensuring high performance and accessibility without the overhead of client-side scripts to calculate or update numbering dynamically.
Can I customize the numbering format (e.g., Roman numerals, bullets)?
Yes, this tool allows you to specify a different numbering style for each level of your hierarchy. You can select from various formats, including decimal (1, 2, 3), lower-alpha (a, b, c), upper-roman (I, II, III), and even define custom separator characters like dots, dashes, or parentheses. This flexibility makes it perfect for legal documents, technical manuals, or complex academic outlines where specific formatting standards must be strictly maintained throughout the document.
Is the generated code compatible with all modern browsers?
Yes, CSS counters have been a stable part of the CSS specification for years and are fully supported across all major browsers, including Chrome, Firefox, Safari, and Edge. You do not need to worry about browser compatibility issues for standard web projects. Since this tool generates standard, clean CSS, you can simply drop the code into your existing stylesheet or a `<style>` block in your HTML file to see immediate results.
