Generate and preview custom CSS list styles for unordered and ordered lists. Customize bullet markers, numbering formats, and spacing in real-time.
AI Generation Prompt
Technical Specification: CSS List Style Generator
Overview
A single-file, browser-based utility designed for web developers to visually generate CSS for <ul> and <ol> elements. This tool eliminates the trial-and-error process of writing custom list CSS by providing a real-time visual preview and copy-pasteable code.
Functional Requirements
- Live Preview: A side-by-side or stacked view showing a sample list (
<ul>and<ol>) that updates instantly as settings change. - Control Panel:
- List Type Toggle: Switch between Unordered (bullets) and Ordered (numbers/letters).
- Marker Selection: Preset dropdown for standard types (disc, circle, square, decimal, roman, etc.).
- ::marker Styling: Input fields for color, font-size, and font-weight (targeting the
::markerpseudo-element). - Positioning: Toggle between
list-style-position: insideandoutside. - Custom Content: Text input to set a specific custom string for bullet markers.
- Code Export: A syntax-highlighted code block that generates clean, modern CSS.
- One-Click Copy: Button to copy the generated CSS directly to the clipboard.
UI/UX Design
- Layout:
- Header: Simple title and brief instruction.
- Main Area: Two-column layout on desktops; single-column on mobile.
- Left Column (Controls): Organized by sections (Layout, Marker, Typography) with clean, modern form elements.
- Right Column (Visualizer): A card-based area showing the rendered list and a read-only code output field.
- Palette:
- Primary:
#3B82F6(Action buttons) - Background:
#FFFFFF - Surface:
#F8FAFC(Card backgrounds) - Text:
#1E293B(Primary),#64748B(Secondary) - Borders:
#E2E8F0
- Primary:
- Animations:
- Smooth CSS transitions (
transition: all 0.2s ease) on all hover/focus states. - Fade-in animations when the preview updates.
- Smooth CSS transitions (
Implementation Directives (Strict Rules)
- Architecture: Must be a single
.htmlfile containing HTML, CSS, and JS. - Dependencies: Use Tailwind CSS via CDN for styling. Use a lightweight library like
clipboard.jsor standard Web Clipboard API for the copy-to-clipboard functionality. - Storage: STRICTLY NO
localStorage,sessionStorage, or cookies. Maintain state using a plain JavaScript object that updates the DOM directly. - Safety: Wrap all operations to prevent external errors. Use
target="_blank"for all external links. - Responsiveness: Use CSS Flexbox/Grid to ensure the layout collapses gracefully on mobile devices (stacking controls on top of the preview).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I customize list markers with CSS?
You can customize list markers using the CSS `list-style-type` property for basic browser presets or the `::marker` pseudo-element for more advanced styling. The `::marker` pseudo-element allows you to change the color, font size, and font weight of the bullet point or number independently of the list item text. Our generator provides a visual interface to toggle between these properties, ensuring that your styles apply correctly to both unordered lists and ordered lists without needing to write custom CSS from scratch.
What is the difference between list-style-type and ::marker?
The `list-style-type` property is the traditional way to set the shape of the marker, such as disc, circle, square, decimal, or roman numerals. It is widely supported and easy to implement for standard list structures. In contrast, the `::marker` pseudo-element provides granular control, allowing you to treat the marker as a distinct graphical element. This allows for more creative designs, such as multi-colored markers or custom icons, though it requires a slightly more modern browser environment to render correctly.
Can I use custom symbols as bullets?
Yes, you can use custom symbols as bullets by combining the `list-style-image` property with a URL or by using the `content` property within a `::before` pseudo-element. This approach effectively replaces the standard browser bullet with any character, icon, or SVG you prefer. Our tool simplifies this process by allowing you to input your desired symbol or select from a library of common special characters, generating the necessary CSS to inject them as markers cleanly.
How do I export my CSS list styles?
Once you have configured your desired look using the preview controls, our generator automatically updates the CSS code block at the bottom of the page. You can simply click the 'Copy to Clipboard' button to save the code. This generated CSS is structured to be production-ready. You can paste it directly into your website's main stylesheet or a style tag, ensuring that your custom list markers appear consistently across all pages of your project.
