Comprehensive Code for Bullet Styles

This single file contains live demonstrations and code snippets for creating various list styles across different technologies.

Part 1: The Modern Standard (HTML & CSS) - Live Demo

This is the standard, recommended approach. The styles below are rendered live by your browser from the code in this file.

Classic Typographic Styles

• Standard Disc Item
• Another disc item

• Hollow Circle Item
• Another circle item

• Solid Square Item
• Another square item

Custom Icon & Graphic Styles

• Feature included
• Positive benefit

• A forward-pointing item
• Actionable step

Structural Styles

1. First Step
2. Second Step
3. Tenth Step is number 10, not 1.

Part 2: Code for the Demo Above

HTML Structure

...
...
...
...
...
...

CSS Styling

/* CSS used for the live demo */
.style-disc   { list-style-type: disc; }
.style-circle { list-style-type: circle; }
.style-square { list-style-type: square; }

.style-checkmark, .style-arrow {
    list-style-type: none; /* Remove default bullet */
    padding-left: 0;
}
.style-checkmark li::before {
    content: '✓ ';
    color: green;
    font-weight: bold;
    margin-right: 8px;
}
.style-arrow li::before {
    content: '→ ';
    color: dodgerblue;
    margin-right: 8px;
}

.style-padded-numeric {
    list-style-type: none; /* Remove default numbers */
    counter-reset: padded-counter;
    padding-left: 0;
}
.style-padded-numeric li {
    counter-increment: padded-counter;
}
.style-padded-numeric li::before {
    content: counter(padded-counter, decimal-leading-zero); /* Creates 01, 02... */
    min-width: 2em;
    margin-right: 0.5em;
    background-color: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
}

Part 3: C++ with GUI Libraries

Creating UI in C++ requires a framework. The following code snippets cannot be run here but can be used in your C++ projects with the respective libraries.

C++ with Dear ImGui (for Tools & Game Dev)

// This code would exist within an ImGui application loop.
// #include "imgui.h"

// Standard bullet style
ImGui::BulletText("Standard disc/bullet item.");
ImGui::BulletText("Another standard item.");

// Nested lists create hierarchy
ImGui::BulletText("Top-level item");
ImGui::Indent();
    ImGui::BulletText("Sub-item (may render as hollow circle).");
ImGui::Unindent();

// Custom bullets via Unicode text (font must support glyphs)
ImGui::Text("✓ Included Feature");
ImGui::Text("✗ Excluded Item");
ImGui::Text("- Hyphenated item");

C++ with Qt Framework (for Desktop Apps)

// This code uses Qt's rich text support via a QLabel.
// #include 

// Create a QLabel widget
QLabel label;

// Use a subset of HTML to define the list styles.
QString htmlContent = R"(
    
Classic Styles
    

        
List item one (disc)
        
List item two (disc)
    

    
Custom & Themed Styles
    

        
✓ Included Feature (unicode)
        
→ Action Item (HTML entity)
    
)";

label.setText(htmlContent);
label.show();

Part 4: Adobe Flash / ActionScript 3 (Historical Context)

Warning: Adobe Flash is obsolete, unsupported, and has major security vulnerabilities. This code is provided for historical reference only and should not be used for new projects.

ActionScript 3.0 Code

// This code uses a TextField's htmlText property.
import flash.text.TextField;

var myTextBox:TextField = new TextField();
myTextBox.width = 300;
myTextBox.multiline = true;
myTextBox.wordWrap = true;
addChild(myTextBox);

// Use basic HTML tags to create lists.
var htmlString:String = "";
htmlString += "
Standard Bullets:
";
htmlString += "
";
htmlString += "
List item one
";
htmlString += "
List item two
";
htmlString += "
";
htmlString += "
Custom Bullets (using unicode):
";
htmlString += "
";
htmlString += "
✓ Included Feature
"; // Checkmark
htmlString += "
";

myTextBox.htmlText = htmlString;