Custom bullet symbol for `<li>` elements in `<ul>` that is a regular character, and not an image

html

responsive-design

css

web-development

byAlex Kataev·Jan 4, 2025

To create custom bullets for your <li> elements, you will need to use certain CSS properties like ::before and content. Start by setting list-style-type to none on <ul> to remove the default bullets. Next, define your desired character in content, with proper padding and margins to ensure alignment.

ul.no-bullets {
    // Space Invaders ate our bullets. Time to create some new ones.
    list-style-type: none;
    padding-left: 0;
}

li.custom-bullet::before {
    // Meet our new recruit, the dot!
    content: '•';
    padding-right: 5px; // Keep safe distance!
}

li {
    // Every recruit needs their space.
    margin-left: 20px;
}

<ul class="no-bullets">
    <li class="custom-bullet">Item 1</li>
    <li class="custom-bullet">Item 2</li>
</ul>

Feel free to swap '•' for a character of choice - perhaps an emoji or special symbol. Adjust padding-right and margin-left for spacing.

Mastering bullets: advanced customizations

Context-specific bullets with emojis or predefined symbols

Depending on your content or design requirements, you might want to use emojis or predefined symbols to create a unique visual experience.

li.custom-emoji::before {
    // Let's blast off with rockets!
    content: '🚀'; 
    // Bullets are heavy. Thus, the spacing.
    margin-right: 8px; 
}

Precision alignment with positioning

If you want your bullets to march in a specific line, try using position: relative; on the <ul> and position: absolute; on the ::before pseudo-element:

ul {
  // Our army base. 'relative' to us.
  position: relative;
}

li::before {
  // The absolute rule of bullets.
  position: absolute;
  left: 0;
  top: 0;
}

Creating hanging indents with negative text-indent

Misaligned text got you down? Shake things up! Implement a negative text-indent for text to create a neat hanging indent effect:

li {
    // A leap of faith in the negative direction.
    text-indent: -5px;
}

Aligning text with absolutely positioned bullets

When you're using absolutely positioned bullets, you need to properly align text to keep aesthetics in order. This can be achieved with padding-left:

li {
    // Text is social-distancing from its bullet.
    padding-left: 20px; 
}

Taming web fonts to create icon bullets

Web fonts like Font Awesome not only offer a vast array of options, but they're also scalable and accessible, which is pretty awesome.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

li::before {
    // Join us in our applause for Font Awesome.
    font-family: 'Font Awesome 5 Free';
    content: '\f00c'; // Check mate!
}

explain-codes / Html / Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

Linked

Change the color of a bullet in an HTML list?



Change bullets color of an HTML list without using span



How do I get the bullets of an unordered list to center with the text?



Css: Control space between bullet and <li>



How to use tick / checkmark symbol (✓) instead of bullets in an unordered list?



I need an unordered list without any bullets



Indent starting from the second line of a paragraph with CSS

