How to print sign "-" instead of "." using
?

Question

I use the HTML code:

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

How can I print sign "-" instead of dot using OL HTML tag like example:

1 - first item
2 - second item
3 - third item

How can I implement it in HTML format.

Welcome to SO, please read the help section on how to ask questions. — StudioTime, Aug 21 '17 at 13:18

score 0 · Answer 1 · answered Aug 21 '17 at 13:21

0

ol {
    counter-reset: item;
    list-style-type: none;
}

li:before {
    content: counter(item) " - "; 
    counter-increment: item 
}

<ol>
  <li>one</li>
  <li>two</li>
</ol>

This will work in IE8+ and other browsers

answered Aug 21 '17 at 13:21

Dmitry B.

Hi Dmitry, I tried it doesn't work. Below is the output: ol { counter-reset: item; list-style-type: none; } li:before { content: counter(item) " - "; counter-increment: item } 1. one 2. two – Levintovich Aug 21 '17 at 14:40
@Levintovich, perhaps the style is overwritten in the other place. – Dmitry B. Aug 21 '17 at 14:50

1 Answers1