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

Linda Hamilton
Release: 2024-11-01 11:31:30
Original
842 people have browsed it

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>
Copy after login

HTML:

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

Result:

- First
- Second
- Third
Copy after login

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>
Copy after login

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!

source:php.cn
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!