• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Unordered List Style Using Dash/Hyphen

CSS · April 12, 2016

As great as CSS is, there are some glaring holes within the specification. We can perform calculations using the calc function in CSS, but for some reason there is no list-style-type: dash but other strange values like lower-greek and plenty of other language specific values.

The solution is quite simple and I decided to make this into a post for future reference and anyone else who finds themselves searching Google for the same thing.

ul.dashed {
    list-style: none;
    padding-left: 0;
}

ul.dashed > li {
    margin-left: 15px;  
}

/* Prevent nested li's from getting messed up */
ul.dashed > li::before {
    content: "-";
    margin-left: -15px;
}

You can replace the hyphen with anything you want, perhaps an emdash or endash? Maybe even an icon from an icon font. Go wild.

Dwayne

Leave a ReplyCancel reply

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
olivvv
olivvv
7 years ago

maybe “::” instead of “:”
and maybe also the margin in “em” since “-” is a character.

0
Brad
Brad
6 years ago

Thanks Dwayne, you legend.

0
Archie
Archie
4 years ago

We missed 2018 comment but heres a 2019 for ya. You da man dwayne.

0
Gabriel
Gabriel
4 years ago

Works great! Thanks Dwayne.

0

Primary Sidebar

Popular

  • Handling Errors with the Fetch API
  • How To Get The Hash of A File In Node.js
  • How To Paginate An Array In Javascript
  • Thoughts on the Flipper Zero
  • Testing Event Listeners In Jest (Without Using A Library)

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz