How to Style HTML Lists with Dash List Markers Using CSS?

Styling HTML Lists with Dash List Markers

In HTML, the default list-style-type is "disc," which renders bullet points. To create a list with dash markers instead, you can use CSS.

One solution is to use the text-indent property to indent the list items and the content property of the :before pseudo-element to insert a dash character.

Example:

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

HTML:

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

Result:

- First
- Second
- Third

This approach allows you to keep the indented list effect while adding a dash marker.

Generic List Markers:

You can use any Unicode character as a list marker by setting the content property of the :before pseudo-element to the desired character's HTML entity code. For example, to use an asterisk (*), use:

<code class="css">ul > li:before {
  content: "*";
}</code>

The above is the detailed content of How to Style HTML Lists with Dash List Markers Using CSS?. For more information, please follow other related articles on the PHP Chinese website!