How to remove the dot in front of the li list item in css-Front-end Q&A-php.cn

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

PHPz

Release： 2023-04-21 11:53:29

Original

6200 people have browsed it

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

Suppose we have the following HTML code:

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

Copy after login

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;
}

Copy after login

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: " ";
}

Copy after login

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

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

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

Copy after login

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!