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

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!
}
