Removing black dots from li and ul

html

responsive-design

css

accessibility

byNikita Barsukov·Oct 21, 2024

In the fast-paced world of web design, black dots on list items can be a minor annoyance. You can quickly eliminate them by applying list-style: none; to your ul or li elements in your CSS:

ul, li {
  /* Sorry black dots, but we don't need ya here */
  list-style: none;
}

This small yet impactful rule works like a charm, giving you a clean list, no dots included.

When general becomes specific

At times, you might want a focused fix, say removing bullets only from your navigation menu. Time to get specific with your selectors!

nav ul {
  /* Bye bye, black dots in the navigation menu! */
  list-style: none;
}

Much cleaner, isn't it? And your other ul elements can happily retain their dots.

Pseudo-elements and customization

Need to dress up your list in a custom style? Walk down the ::before pseudo-element lane:

ul.custom-list li::before {
  /* Who needs standard bullets when you can design your own? */
  content: "• ";
  color: #333;
  font-weight: bold;
}

Yes, you read it right! With some black CSS magic, you can custom design your list. Talk about personal touch!

Browser checks and graceful degradation

Of course, the road may not always be smooth. Test your styles across browsers as list-style: none; may vary. But, like a graceful dancer, make sure your method degrades gracefully for the old timers.

Beyond default styling: Custom list styling

Why settle for plain when you can stand out? Unleash your creativity with unique list styles:

Swap traditional bullets for images using the list-style-image property.
Control the marker's spot relative to the content using list-style-position.
Harness the power of CSS counters for custom numbered lists offering more control.