How to remove the dot in front of the li list item in css

In web development, lists are often used, but the dots before the list items are not needed or wanted. So how to remove it? In this article, we’ll show you how to remove the dot in front of a list item using CSS.

In HTML, we usually use the tags

or
to create ordered or unordered lists. In an unordered list, a small dot is displayed by default, while in an ordered list, a number or letter is displayed by default.

Suppose we have the following HTML code:

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

When you run the code, you will see a small dot in front of each line.

In order to remove these points, we can use CSS to control it. Below we will introduce three methods.

Method 1: Use list-style

list-style is an attribute used to set the list style. It can set the glyph in front of the list item. We can set it to none to remove all glyphs. The following is the specific code implementation:

ul {
  list-style: none;
}

Using list-style can solve all list items at once, but it will be more troublesome if we need to make special settings for some list items later.

Method 2: Use pseudo element: before

There is a pseudo element in CSS: before, which can add content in front of the element. We can use this to remove the glyph and replace it with a space. The following is the specific code implementation:

ul li:before {
  content: " ";
}

This method is relatively more flexible. We can set specific li elements, but it should be noted that this method only applies to unordered lists. If you want to remove the numbers or letters in front of the ordered list, you need another method.

Method 3: Use change tag

We can change the tag of the unordered list

to
or

, so that the small circle in front can be removed Clicked.

<div>
  <p>第一项</p>
  <p>第二项</p>
  <p>第三项</p>
</div>

Although this method can remove the small dot in front, it also destroys the original meaning of the list, causing the list to lose some semantics. Removing list labels just to remove dots is probably not a good practice.

To sum up, we have introduced three common methods to remove the dots in front of list items. Which method to use depends on the actual needs and scenarios. In actual development, we can also combine different methods to meet different needs.

The above is the detailed content of How to remove the dot in front of the li list item in css. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn