Superscripted list items

Question

I want to have an ordered list, using superscript, so something like this in my html:

<ol class="sup_n">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

but having it appear as

¹⁾ Item 1
²⁾ Item 2
³⁾ Item 3a
Item 3b

However, existing solutions only show it working for list items that contain only text. The moment there is other content (spans, divs, p tags, images other listings and name it) the result is not exactly ok. Since my html contains a mixture of list 'styles', (some only text, some mixture of various tags) I'd like it to be flexible enough to deal with anything within the li tag as if it would be a 'normal' tag. I hope I make some sense, I'm not a real css wizard to be honest.

This is the code I used (structural idea found on above mentioned page, added styles for superscript):

ol.sup_n {
    counter-reset: item;
    margin: 0;
    padding: 0;
    list-style:none;
}

.sup_n li {
    display: block;
    margin-left: 1em;
}

.sup_n li:before {
    content: counter(item) ")";
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;
    padding-right: 0.5em;
    margin-left: -3.5em;       
    vertical-align:super;
    font-size:xx-small;
}

<ol class="sup_n">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

but it only works fine if there are no sub elements in the list item. How can I make it work with multiple different elements in the li? The example is using only p tags but it can be different tags in reality. What would be the best approach to cover these?

possible duplicate of [How can you customize the numbers in an ordered list?](http://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list) — cimmanon, Mar 02 '13 at 14:39
Thanks for pointing to the article cimmanon, I missed that one. It's not exactly the same but combining a few things should do the trick I think. — Wokoman, Mar 02 '13 at 14:52
Thanks all for pointing to the page above mentioned, but it only focuses on 'text only' list items, which worked out fine for my simplified original example but the reality is a bit less nice on my HTML — Wokoman, Mar 02 '13 at 19:32

score 4 · Answer 1 · edited Dec 28 '17 at 18:51

Found it myself in the meantime after tweaking some of the stuff. If anyone interested here's the code. Thanks to all pointing me in the right direction

ol.super {
        counter-reset: item;
        padding: 0;
     list-style:none;
    }
    
    .super li:before{
     content: counter(item) ")";
        counter-increment: item;
     position: absolute; 
     vertical-align:super;
     font-size:xx-small;
     left: 1em;
    }
    
    .super li{
     position: relative;
     display: block;
     padding: .0em .0em .0em 1.5em;
    }

<ol class="super">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

score 0 · Answer 2 · answered Mar 02 '13 at 14:58

found a possible solution here: http://www.red-team-design.com/css3-ordered-list-styles

there it's done with code like this

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
}

with this example you should be able to do your own style

score -2 · Answer 3 · edited Dec 28 '17 at 17:05

-2

.super span{
    vertical-align:super;
}

<ol class="super">
<li>Item <span>1</span></li>
<li>Item <span>2</span></li>
<li>Item <span>3</span></li>
</ol>

edited Dec 28 '17 at 17:05

dey.shin

990
10
21

answered Mar 02 '13 at 14:52

Ankit Agrawal

6,034
6
25
49

Have you tried running your code snippet? It does not return what the questioner wants to get – dey.shin Dec 28 '17 at 16:31

Superscripted list items

3 Answers3