How to remove the dots of ul and li tags in html

To remove the dots from ul and li tags in HTML, you can take the following steps: Use CSS style list-type none: ul, li { list-style-type: none; }. Use before pseudo-element and content attribute: li { position: relative; padding-left: 1em; }, li:before { content: ""; position: absolute; left: 0; top: 0.2em; width: 0.5em; height : 0.

How to remove the dots in ul and li tags in HTML

In HTML, ul (unordered list) and li (list item) tags usually display a small round dot as a marker. If you need to remove these dots, you can use a CSS stylesheet.

Method:

1. Use list style type none:

   <code class="css">ul, li {
     list-style-type: none;
   }</code>

2. Use before pseudo-element and content attribute:

   <code class="css">li {
     position: relative;
     padding-left: 1em;
   }
   
   li:before {
     content: "";
     position: absolute;
     left: 0;
     top: 0.2em;
     width: 0.5em;
     height: 0.5em;
     background-color: #000;
     border-radius: 50%;
   }</code>

Usage example:

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>

<code class="css">ul, li {
  list-style-type: none;  // 使用列表样式类型 none
}</code>

Effect:

The round dots will be removed and an unordered list with plain text content will be created.

Note:

• The solutions provided above only work in modern browsers such as Firefox, Chrome, and Safari.
• For older browsers such as Internet Explorer, additional hacks or JavaScript may be required to achieve the same effect.

The above is the detailed content of How to remove the dots of ul and li tags in html. For more information, please follow other related articles on the PHP Chinese website!