CODEWITHSUNDEEP
htmlcsshtml-lists
Neil
Neil

Reputation: 968

CSS OL Lists - Double Numbers

I need to add double numbers to the ol list. An example being:

  1. Welcome Visitor 1.1. Introduction 1.2. Further Info 1.3. Further Info 1.4. Further Info 1.5. Further Info

  2. Another OL 2.1. Further Info 2.2. Further Info 2.3. Further Info

I am aware of the nesting info and alignment, alongside starting numbers and custom images. But I cannot get the two number system number above. Is there a basic rule I am missing?

I am using the above for a privacy policy, it needs to be in the format, I am not even going to contest it. I would prefer not use :after due to browser compatibility..

Any help would be great :)

Upvotes: 0

Views: 1997

Answers (2)

C3roe
C3roe

Reputation: 96316

I am using the above for a privacy policy, it needs to be in the format, I am not even going to contest it. I would prefer not use :after due to browser compatibility.

If the exact right layout is very important even in older browsers – then I’d use UL instead and put the numbering into the LI hard-coded:

<ul>
    <li>1. Visitor
        <ul>
            <li>1.1 Introduction</li>
            <li>1.2 Further Info</li>
            ...
        </ul>
    </li>
    ...
</ul>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105923

you need to reset your list-style-type to none and then use counter css with pseudo-class :before.

pseudo-element ::before will not work with IE8.

If you have a jsfiddle, we can show from your code :)

Upvotes: 0

Related Questions