Normally, when we create a list (ordered or unordered) list, it appears in the form of markers or bullets. Few times we donn’t want the bullets or any mark, we just want a simple list without bullets. To do so we can use pure CSS to remove those bullets from the list.
For this we use the CSS list-style-type Property. It specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’. IF we set the none value it will not create the markers or the bullets for the lists. Also we’ll have to set the margin:0 and padding:0 as the lists have a default margin and padding.
Below example illustrate the approach:
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
h1 {
color: green;
}
ul#remove {
list-style-type: none;
padding: 0;
}
.left {
width : 40%;
float: left;
}
.right {
width : 40%;
float: right;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>HTML bulletless list</
h2
>
</
center
>
<
div
class
=
"left"
>
<
p
>GeeksforGeeks courses List:</
p
>
<
ul
>
<
li
>Geeks</
li
>
<
li
>Sudo</
li
>
<
li
>Gfg</
li
>
<
li
>Gate</
li
>
<
li
>Placement</
li
>
</
ul
>
</
div
>
<
div
class
=
"right"
>
<
p
>GeeksforGeeks courses List:</
p
>
<
ul
id
=
"remove"
>
<
li
>Geeks</
li
>
<
li
>Sudo</
li
>
<
li
>Gfg</
li
>
<
li
>Gate</
li
>
<
li
>Placement</
li
>
</
ul
>
</
body
>
</
html
>
chevron_rightfilter_none - Output: