How to Replace HTML List Bullets with Dash Symbols?

Customizing List Styles in HTML with Dash Symbols

In HTML, the default list style is rendered as a disc or a square, but you may desire to customize the bullet point with a dash symbol. To achieve this, you can leverage CSS to modify the list appearance.

Using the :before Pseudo Class

One approach involves using the :before pseudo class to insert a dash before each list item. This technique allows you to maintain the standard list indentation while adding a dash. However, this approach may introduce potential compatibility issues across different browsers due to variations in CSS support.

Combining list-style-type with text-indent

A more reliable solution is to use list-style-type: none to remove the default bullet and then set text-indent to a negative value to maintain the indented list effect. Additionally, you can use :before to insert the dash symbol, ensuring consistent rendering across browsers.

Example Code

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

Usage and Output

Within your HTML, you can apply the dashed class to the unordered list (

):

<code class="html">Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text</code>

This will produce a customized list with dashes as bullet points while preserving the list indentation:

• First
• Second
• Third

• First

  • Second
  • Third

This method is cross-browser compatible and effectively replaces the default list style with customized dashes.

The above is the detailed content of How to Replace HTML List Bullets with Dash Symbols?. For more information, please follow other related articles on the PHP Chinese website!