HTML CSS listing style change

Question

I want to use listing in my code to get the following output -

[1]. This is my line one
[2]. This is my line two
[3]. this is my line three, which is very very long and is not justified when used under list. 

I used the following code. but did not work

<ol list-style-type: [decimal];>
<li>This is my line one</li>
<li>This is my line two</li>
<li>this is my line three, which is very very long and is not justified when used under list.</li>
</ol>

I am new to html and css coding.! The problem now i face is when i use this style long sentences are not justified under a single number. Here is how it looks like now : image.ibb.co/e8Nfda/image.png how to justify my lines?

Answer 1

Updated with your requirement :

ol { list-style: none; 
    counter-reset:array;}
   ol li{text-indent: -2em;}
    ol li:before {
    counter-increment:array;
    content:"[" counter(array) "]. ";
    }

    <ol>
    <li>This is my line one This is my line one This is my line one This is my line one This is my line one This is my line one</li>
    <li>This is my line two</li>
    <li>this is my line three</li>
    </ol>

Answer 2

Try this css jsfiddle

ol { list-style: none; 
counter-reset:array;}
ol li:before {
counter-increment:array;
content:"[" counter(array) "] ";
}