THE STRUGGLE OF ME TO FIND SOLUTION OF AI-SESSION!
[Click this button]

🎯 CSS Bullet Point Fix: Solving the Symbol Overlap Bug

📌 CSS Tutorial ✅ Solution Included ❌ Bug Fixed

Problem: When customizing bullet points in CSS, the symbol often appears inside the text instead of as a proper bullet point. This guide shows you exactly how to fix it.

❌ The Problem: Symbol Overlaps Text

This is what happens when the bullet symbol is not properly positioned. The symbol appears inside the text instead of at the start.

First item - symbol overlaps text
Second item - symbol overlaps text
Third item - symbol overlaps text
Nested item - symbol also overlaps

❌ The Bug (Before)

            /* ❌ BROKEN - Symbol overlaps text */

            ul li::before {
            content: " * ";
            margin-right: 8px;
            display: inline-block;
            color: #2a6b9e;
            font-weight: 700;
            }

            ul li {
            padding: 0.3rem 0;
            position: relative;
            }
        

Result: The asterisk overlaps with the text instead of appearing as a proper bullet point.

✅ The Solution: Proper Positioning

The fix requires three specific changes to properly position the bullet symbol.

First item - asterisk properly positioned
Second item - asterisk properly positioned
Third item - asterisk properly positioned
- Nested item - hollow circle bullet
- Another nested item
- Deeper nesting
  - Square bullet for deeper levels
  - Another deep item
Fourth item - asterisk properly positioned

✅ The Fix (After)

            /* ✅ FIXED - Proper bullet positioning */

            ul li {
            padding: 0.3rem 0 0.3rem 2rem !important;
            /* ← Space for bullet */
            position: relative !important;
            }

            ul li::before {
            content: "*" !important;
            /* ← Clean symbol */
            position: absolute !important;
            /* ← Precise positioning */
            left: 0 !important;
            top: 0.4rem !important;
            color: #0066cc !important;
            font-weight: 700 !important;
            font-size: 1.2em !important;
            }
        

Result: The asterisk appears as a clean bullet point at the start of each line.

🔧 What Changed?

Here are the specific CSS changes that fixed the bug:

Property	❌ BEFORE (Broken)	✅ AFTER (Fixed)
`li` padding	`padding: 0.3rem 0;` ❌ No space for bullet	`padding: 0.3rem 0 0.3rem 2rem !important;` ✅ Space created for bullet
`::before` position	`display: inline-block;` ❌ Bullet flows with text	`position: absolute; left: 0; top: 0.4rem;` ✅ Bullet positioned at start
`::before` content	`content: " * ";` ❌ Spaces cause extra gap	`content: "*";` ✅ Clean asterisk only
`::before` margin	`margin-right: 8px;` ❌ Ineffective with inline-block	✅ Removed (uses positioning)
Nested lists	❌ Not specified - same bug	`padding-left: 1.5rem;` ✅ Proper indentation
Bootstrap override	❌ No `!important`	`!important` ✅ High specificity

📝 Step-by-Step Breakdown

1. Add Left Padding to Create Space

❌ BEFORE	✅ AFTER
`padding: 0.3rem 0;` ❌ No space for bullet	`padding: 0.3rem 0 0.3rem 2rem !important;` ✅ Space created for bullet

Why: The padding-left creates space for the bullet symbol so it doesn't overlap with the text.

2. Use Absolute Positioning

❌ BEFORE	✅ AFTER
`display: inline-block;` ❌ Bullet flows with text	`position: absolute; left: 0; top: 0.4rem;` ✅ Bullet positioned at start

Why: position: absolute allows precise placement of the bullet at the left: 0 edge, independent of the text flow.

3. Clean the Content

❌ BEFORE	✅ AFTER
`content: " * ";` ❌ Extra spaces cause gaps	`content: "*";` ✅ Clean symbol only

Why: Removing spaces from content ensures the symbol appears cleanly without extra gaps.

4. Remove Margin (Use Positioning Instead)

❌ BEFORE	✅ AFTER
`margin-right: 8px;` ❌ Ineffective with inline-block	✅ Removed - uses absolute positioning

Why: With position: absolute, margins are no longer needed. The left property controls the exact position.

📦 Complete Solutions

Solution 1: Simple Article Layout

        /* ✅ SOLUTION: Fixed bullet points */

        ul {
        list-style-type: none;
        padding-left: 0;
        }

        ul li {
        margin-bottom: 1em;
        padding-left: 2rem;
        /* ← Space for bullet */
        position: relative;
        }

        ul li::before {
        content: "*";
        /* ← Asterisk bullet */
        color: #0066cc;
        font-weight: bold;
        font-size: 1.2em;
        position: absolute;
        /* ← Precise positioning */
        left: 0;
        top: 0.2rem;
        }
    

Solution 2: With Bootstrap Override

        /* ✅ SOLUTION: Fixed bullet points with Bootstrap override */

        .scroll-card ul:not(.list-unstyled) > li {
        padding: 0.3rem 0 0.3rem 2rem !important;
        position: relative !important;
        list-style: none !important;
        }

        .scroll-card ul:not(.list-unstyled) > li::before {
        content: "*" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0.3rem !important;
        color: #2a6b9e !important;
        font-weight: 700 !important;
        font-size: 1.1em !important;
        }
    

Solution 3: With Nested Lists

        /* ✅ Nested lists - proper indentation */

        ul ul {
        padding-left: 1.5rem !important;
        margin-top: 0.2rem !important;
        }

        ul ul > li {
        padding-left: 2rem !important;
        border-bottom: none !important;
        }

        ul ul > li::before {
        content: "◦" !important;
        /* ← Hollow circle for nested */
        color: #4a7a9e !important;
        }

        /* Deeper nesting */
        ul ul ul > li::before {
        content: "▪" !important;
        /* ← Square for deeper nesting */
        color: #6a9abe !important;
        }
    

💻 Complete Working Example

Here's a fully functional HTML page you can copy and paste to see the fix in action:

        <!-- ============================================================ -->
        <!-- COMPLETE HTML EXAMPLE - Copy and paste this -->
        <!-- ============================================================ -->

        <!DOCTYPE html>
        <html>
        <head>
        <title>CSS Bullet Point Fix</title>
        <style>
        /* Reset */
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

        body {
        font-family: system-ui, -apple-system, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
        background: #f8f9fa;
        }

        /* ============================================================
        SOLUTION: Fixed bullet points with asterisk
        ============================================================ */
        ul {
        list-style: none;
        padding-left: 0;
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        ul li {
        padding: 0.5rem 0 0.5rem 2rem;
        /* ← Space for bullet */
        position: relative;
        font-size: 1rem;
        line-height: 1.6;
        border-bottom: 1px solid #f0f0f0;
        }

        ul li:last-child {
        border-bottom: none;
        }

        ul li::before {
        content: "*";
        /* ← Asterisk bullet */
        position: absolute;
        /* ← Precise positioning */
        left: 0;
        top: 0.5rem;
        color: #0066cc;
        font-weight: 700;
        font-size: 1.2em;
        }

        /* Nested lists */
        ul ul {
        padding-left: 1.5rem;
        margin-top: 0.5rem;
        background: transparent;
        box-shadow: none;
        padding: 0.5rem 0 0.5rem 1.5rem;
        }

        ul ul li {
        border-bottom: none;
        padding: 0.3rem 0 0.3rem 2rem;
        }

        ul ul li::before {
        content: "◦";
        /* ← Hollow circle for nested */
        color: #0088cc;
        font-size: 1.1em;
        }

        ul ul ul li::before {
        content: "▪";
        /* ← Square for deeper nesting */
        color: #00aacc;
        font-size: 1em;
        }

        /* Heading */
        h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: #1a1a1a;
        }

        .subtitle {
        color: #666;
        margin-bottom: 2rem;
        font-size: 1.1rem;
        }

        .success-badge {
        display: inline-block;
        background: #28a745;
        color: white;
        padding: 0.3rem 1rem;
        border-radius: 40px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 1rem;
        }
        </style>
        </head>
        <body>
        <h1>✅ CSS Bullet Point Fix</h1>
        <p class="subtitle">Asterisk (*) bullets properly positioned</p>
        <span class="success-badge">✓ FIXED: No overlapping</span>

        <ul>
        <li>First item with proper asterisk bullet</li>
        <li>Second item with proper asterisk bullet</li>
        <li>Third item with proper asterisk bullet
        <ul>
        <li>Nested item with hollow circle</li>
        <li>Another nested item</li>
        <li>Deeper nesting
        <ul>
        <li>Square bullet for deeper levels</li>
        <li>Another deep item</li>
        </ul>
        </li>
        </ul>
        </li>
        <li>Fourth item with proper asterisk bullet</li>
        </ul>
        </body>
        </html>
    

📋 Quick Reference: The Fix in One Line

If your positioning is already correct, just change the symbol:

❌ BEFORE

content: "•";

✅ AFTER

content: "*";

That's it! Just change "•" to "*"

📌 Summary

The Fix in 4 Steps:

Add padding: padding-left: 2rem to create space for the bullet
Position absolutely: position: absolute; left: 0; for precise placement
Clean the content: content: "*"; (remove spaces)
Override Bootstrap: Use !important if needed

Issue	Cause	Solution
✗ Symbol overlaps text	No space created for symbol	✓ Add `padding-left` to `<li>`
✗ Symbol not positioned correctly	`inline-block` flows with text	✓ Use `position: absolute`
✗ Extra gaps around symbol	Spaces in `content`	✓ Use `content: "*"` (no spaces)
✗ Bootstrap overrides styles	Low specificity	✓ Use `!important` and specific selectors
✗ Nested lists not indented	No nested styling	✓ Add `padding-left` for nested lists

💡 Key Takeaway: The bug is caused by the symbol not having enough space and improper positioning. The fix requires: (1) adding padding to create space, (2) using absolute positioning for precise placement, (3) using !important to override Bootstrap, and (4) cleaning the content to remove extra spaces.

CSS Bullet Point Fix — Complete guide to solving the symbol overlap bug
Works with Bootstrap, nested lists, and all modern browsers

ANDREAS TOMMY PARLAUNGAN MANURUNG

Search This Blog

TECHNICAL-DETAILS STUFF OF THE DAY !