Html list-style-type dash

html

responsive-design

css-properties

list-styles

byAlex Kataev·Sep 6, 2024

To display dashes for list items in HTML, we're need to override the default bullets with a dash of CSS styling. Start by applying list-style: none to the list, and then content: "– " in a ::before pseudo-element for list items. Here, let me show you:

ul.dash-list {
  list-style: none; /* Who needs default bullets anyways */
}
ul.dash-list li::before {
  content: "– "; /* Look mom, it's a dash! */
  padding-right: 5px; /* A dash needs its space too */
}

And the HTML part:

<ul class="dash-list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Voila! With this CSS, each li element now flaunts a dash as a proud badge!

Nudging dashes: manipulation with text indentation

You're not always going to want your dashes living life on the edge (of the layout, of course). To take control of positioning, let's meet a few CSS properties:

text-indent: This is helpful to nudge the dash.
display: When set to inline-block, this ensures our list items are pliable to positioning tweaks.
margin-left and width: A dynamic duo for precise dash placement.
padding-left: Helpful for text indentation after the dash.

Here's a sample implementation:

ul.dash-list li::before {
  content: "–";
  display: inline-block; /* Because who doesn't like a little flexibility */
  width: 1em; /* I'm watching my weight */
  margin-left: -1em; /* A little to the left, please */
  text-indent: -5px; /* a nudging we will go */
}
ul.dash-list li {
  margin-left: 0; /* Keep it neat */
  padding-left: 1em; /* so snug */
}

Crafting unique list markers: texts and images

With text characters

Feel like making your lists stand out? Replace the content property with another character;

ul.dash-list li::before {
  content: "–"; /* Life isn't just about the en dash, you know */
}

With image bullets

Want to crank the uniqueness up to 11? Try, list-style-image. This works with both online images and those on your machine:

ul.dash-list {
  list-style-image: url('path-to-your-dash-image.png'); /* who said lists can't be fancy */
}

Or use a base64 encoded image:

ul.dash-list {
  list-style-image: url('data:image/png;base64,iVBORw...'); /* Unleash the power of base64 encoding */
}

And oh, just a quick note - before styling your heart away, check for browser compatibility using Can I Use or QuirksMode. Not all browsers appreciate fine web art. 😉

Styling alternatives: square markers

If you want to make a square deal out of your list styles:

ul.square-inside-list {
  list-style-type: square inside; /* Because squares are the new cool */
}

Earning karma: Community wisdom and best practices

Don't underestimate community knowledge. A solution with high votes doesn't just have the seal of approval, it's been through nerdy nitpicking and survived!