HTML list-style-type dash

Question

Is there a way to create a list-style in HTML with a dash  i e  - or  ndash   amp ndash  or  mdash   amp mdash   i e    lt ul gt     lt li gt abc lt  li gt   lt  ul gt    Outputting   - abc   It s occurred to me to do this with something like li before   content   -      though I don t know the cons of that option  and would be much obliged for feedback    More generically  I wouldn t mind knowing how to use generic characters for list items

User · Answer

Here s a version without any position relative or absolute and without text-indent   ul dash       list-style  none      margin-left  0      padding-left  1em    ul dash  gt  li before       display  inline-block      content   -       width  1em      margin-left  -1em      Enjoy

User · Answer

Let me add my version too  mostly for me to find my own preferred solution again    x000D   x000D  ul   x000D    list-style-type  none  x000D      use padding to move list item from left to right   x000D    padding-left  1em  x000D    x000D   x000D  ul li before   x000D    content         x000D    position  absolute  x000D      change margin to move dash around   x000D    margin-left  -1em  x000D    x000D   lt  --  x000D  Just use the following CSS to turn your x000D  common disc lists into a list-style-type   dash   x000D  Give credit and enjoy  x000D  -- gt  x000D  Some text x000D   lt ul gt  x000D     lt li gt One lt  li gt  x000D     lt li gt Very lt  li gt  x000D     lt li gt Simple Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Aenean commodo ligula eget dolor  Aenean massa  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  lt  li gt  x000D     lt li gt Approach  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    https   codepen io burningTyger pen dNzgrQ

User · Answer

Instead of using lu li  used dl  definition list  and dd    lt dd gt  can be defined using standard css style such as  color blue font-size 1em   and use as marker whatever symbol you place after the html tag  It works like ul li  but allows you to use any symbol  you just have to indent it to get the indented list effect you normally get with ul li   CSS  dd text-indent -10px    HTML  lt dl gt   lt dd gt - One lt  dd gt   lt dd gt - Two lt  dd gt   lt dd gt - Three lt  dd gt  lt  dl gt    Gives you much cleaner code  That way  you could use any type of character as marker  Indent is of about -10px and it works perfect

User · Answer

ul   margin 0  list-style-type  none    li before   content   -

User · Answer

Another way   li before     content    2014 00a0 00a0      em-dash followed by two non-breaking spaces     li     list-style  none    text-indent  -1 5em    padding-left  1 5em

User · Answer

HTML  lt ul gt     lt li gt One lt  li gt     lt li gt Very lt  li gt     lt li gt Simple lt  li gt     lt li gt Approach  lt  li gt   lt  ul gt    CSS ul     list-style-type  none     ul li before     content   -     position  absolute    margin-left  -20px

User · Answer

I do not know if there is a better way  but you can create a custom bullet point graphic depicting a dash  and then let the browser know you want to use it in your list with the list-style-type property  An example on that page shows how to use a graphic as a bullet   I have never tried to use  before in the way you have  although it may work  The downside is that it will not be supported by some older browsers  My gut reaction is that this is still important enough to take into consideration  In the future  this may not be as important   EDIT  I have done a little testing with the OP s approach  In IE8  I couldn t get the technique to work  so it definitely is not yet cross-browser  Moreover  in Firefox and Chrome  setting list-style-type to none in conjunction appears to be ignored

User · Answer

There is an easy fix  text-indent  to keep the indented list effect with the  before pseudo class    x000D   x000D  ul   x000D    margin  0  x000D    x000D  ul dashed   x000D    list-style-type  none  x000D    x000D  ul dashed  gt  li   x000D    text-indent  -5px  x000D    x000D  ul dashed  gt  li before   x000D    content   -   x000D    text-indent  -5px  x000D    x000D  Some text x000D   lt ul class  dashed  gt  x000D     lt li gt First lt  li gt  x000D     lt li gt Second lt  li gt  x000D     lt li gt Third lt  li gt  x000D   lt  ul gt  x000D   lt ul gt  x000D     lt li gt First lt  li gt  x000D     lt li gt Second lt  li gt  x000D     lt li gt Third lt  li gt  x000D   lt  ul gt  x000D  Last text x000D   x000D   x000D

User · Answer

My solution is in adding extra span tag with mdash in it    lt ul class  mdash-list  gt       lt li gt  lt span class  mdash-icon  gt  amp mdash  lt  span gt ABC lt  li gt       lt li gt  lt span class  mdash-icon  gt  amp mdash  lt  span gt XYZ lt  li gt   lt  ul gt    and adding to css   ul mdash-list        list-style none     ul mdash-list  li       position relative     ul mdash-list li  mdash-icon       position absolute      left -20px

User · Answer

Here is my fiddle version    The  modernizr  class  generatedcontent on  lt html gt  practically means IE8  and every other sane browser    lt html class  generatedcontent  gt     lt ul class  ul-dash hanging  gt       lt li gt Lorem ipsum dolor sit amet stack o verflow dot com lt  li gt       lt li gt Lorem ipsum dolor sit amet stack o verflow dot com lt  li gt     lt  ul gt    CSS    ul-dash     margin  0      ul-dash     margin-left  0em    padding-left  1 5em      ul-dash hanging  gt  li      remove   gt   for IE6 support      padding-left  1em    text-indent  -1em        generatedcontent  ul-dash     list-style  none     generatedcontent  ul-dash  gt  li before     content           text-indent  0    display  inline-block    width  0    position  relative    left  -1 5em

User · Answer

You could use  before and content  bearing in mind that this is not supported in IE 7 or below  If you re OK with that then this is your best solution  See the Can I Use or QuirksMode CSS compatibility tables for full details   A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash  See the W3C list-style-image page for examples

User · Answer

You can just set li  marker like so  li  marker      content   -

User · Answer

ul     list-style-type  none     ul  gt  li before     content            en dash      position  absolute    margin-left  -1 1em       demo fiddle

User · Answer

For anyone having this problem today  the solution is simply   list-style   -

User · Answer

Use this   ul       list-style  square inside url  data image gif base64 R0lGODlhBQAKAIABAAAAAP   yH5BAEAAAEALAAAAAAFAAoAAAIIjI ZwKwPUQEAOw

User · Answer

CSS   li before     content            margin-left  -20px     li     margin-left  20px    list-style  none      HTML    lt ul gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt   lt  ul gt

User · Answer

One of the top answers did not work for me  because  after a little bit trial and error  the li before also needed the css rule display inline-block   So this is a fully working answer for me   ul dashes    list-style  none    padding-left  2em    li       amp  before        content   -         text-indent  -2em        display  inline-block

User · Answer

What worked for me was    lt ul gt       lt li type   none  gt    amp ndash  line 1  lt  li gt       lt li type   none  gt    amp ndash  line 2  lt  li gt       lt li type   none  gt    amp ndash  line 3  lt  li gt   lt  ul gt

User · Answer

In my case adding this code to CSS  ul       list-style-type   -        was enough  Simple as it is

[html] HTML list-style-type dash

Examples related to html

Examples related to css

Examples related to xhtml

Examples related to html-lists