css - 上标列表项

Question

我想要一个有序列表，使用上标，所以在我的 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>

但让它看起来像

1) 第 1 项
2) 第 2 项
3) 元素 3a 元素 3b

但是，现有解决方案仅显示它适用于仅包含文本的列表项。当有其他内容(跨度、div、p 标签、图像其他列表并命名)时，结果并不完全正确。由于我的 html 包含列表“样式”的混合(一些只有文本，一些混合了各种标签)我希望它足够灵活以处理 li 标签中的任何内容，就好像它是一个“普通”标签一样.我希望我说的有道理，老实说，我不是一个真正的 css 向导。

这是我使用的代码(在上面提到的页面上找到了结构思想，为上标添加了样式):

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>

但只有在列表项中没有子元素时它才能正常工作。我怎样才能让它与 li 中的多个不同元素一起工作？该示例仅使用 p 个标签，但实际上它可以是不同的标签。涵盖这些内容的最佳方法是什么？

Answer 1

在调整了一些东西之后，我自己在此期间找到了它。如果有人感兴趣，这里是代码。感谢所有人为我指明了正确的方向

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>