Use CSS to eliminate <li> bullets

HTML & CSS
1

How can I create a special CSS class to eliminate the standard bullet displayed when an <li> tag is used in an ordered list?

2

Hi nodropshots and welcome to SitePoint.

You can simply use the following to disable the default list style.

ul {
    list-style: none;
}
3

Numbers appear in an ordered list rather than bullets. But either way, you can just do what chris suggested above. If you want it to apply to a specific list, then add a class to that list and then target that class via CSS. E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.special {
	list-style: none;
	margin: 0;
	padding: 0;
}

</style>
</head>
<body>

<ul class="special">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

<ol class="special">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ol>
			
</body>
</html>
4

I’ll repeat most of what has been said already and add a little wrinkle.

The class to remove the bullets/markers can be added to the entire list, <ul> or <ol>, or it can be added to individual list items, <li>, to selective remove the bullet/marker. Likewise, a class can also be used to apply a different marker to individual list items, if desired.

Here’s a little demo to play with:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>List Item Bullets</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1164858-Use-CSS-to-eliminate-lt-li-gt-bullets
Thread: Use CSS to eliminate <li> bullets
2013.08.17 16:00
nodropshots
-->
    <style type="text/css">

.nobull {list-style-type:none}
.circle {list-style-type:circle}

    </style>
</head>
<body>

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li class="nobull">List Item</li>
    <li>List Item</li>
    <li class="circle">List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

</body>
</html>
5

[ot]

class="nobull"

:lol: [/ot]

6

I do not like using <ul> and <li> cause browsers tend to add different padding and bullets. I always try to avoid it by using div’s with special class ui and li. It does the trick better than having to test your website in several browsers.

7

All you have to do is set the padding and bullets you want via CSS. Then you end up with semantic HTML. Not so hard, really. :slight_smile:

8

Ditto Ralph’s recommendation.

Plus, lists apply default vertical margins, so be sure to set the margins on the <ul> or <ol> to zero (along with the padding). Otherwise, you might be tempted to assign a negative margin-top to items following the list to fix some mysterious vertical space problem. :slight_smile:

A little “reset” goes a long way toward good code and semantic HTML.

Cheers