在html中的ol中的数字之前插入元素

是否可以创建一个有序列表（可以嵌套），其中每个数字的左边都有html元素？下面是一个粗略的例子：

我以前在css中玩过：但我意识到不能在那个里插入html内容。有没有可能有机地做到这一点，或者我需要借助一些“黑客”来实现这一点。

允许您使用CSS中的

背景向左侧插入图像：

HTML:

<ol class="img">
<li>(group) As only</li>
<ol class="img">
  <li>AB</li>
  <li>AC</li>
</ol>
<li>(group) Bs only</li>
  <ol class="img">
    <li>BA</li>
    <li>BC</li>
  </ol>
<li>(group) Cs only</li>
<ol class="img">
  <li>CA</li>
  <li>CB</li>
</ol>
</ol> 
<div id="foo">*</div>

ol.img li{background: 
  url("http://www.rabensburg.at/modules/event/images/rightarrow.gif") no-repeat scroll 0px 0px transparent;
  list-style-position: inside;
  padding-left: 16px;
}

可选jQuery（在
li
之前动态插入元素）：

允许您使用CSS中的
background
将图像插入左侧：

HTML:

<ol class="img">
<li>(group) As only</li>
<ol class="img">
  <li>AB</li>
  <li>AC</li>
</ol>
<li>(group) Bs only</li>
  <ol class="img">
    <li>BA</li>
    <li>BC</li>
  </ol>
<li>(group) Cs only</li>
<ol class="img">
  <li>CA</li>
  <li>CB</li>
</ol>
</ol> 
<div id="foo">*</div>

ol.img li{background: 
  url("http://www.rabensburg.at/modules/event/images/rightarrow.gif") no-repeat scroll 0px 0px transparent;
  list-style-position: inside;
  padding-left: 16px;
}

可选jQuery（在
li
之前动态插入元素）：

您几乎已经具备了定位功能，但您需要使用
绝对
而不是
相对

看看这个
你几乎已经有了定位，但是你需要使用
绝对
而不是
相对

查看此
我将使用Flexbox元素，如下代码所示，取自本网站：


ol，ul{display:flex；flex-direction:column；flex-wrap:nowrap；对齐内容：flex-start；边距：1em 0px；填充：0；列表样式：none；}
li{显示：柔性；线高度：1.5；位置：相对；}
ol{计数器重置：数字}
ol>li{}
ol>li:在{计数器增量：数字；内容：“计数器（数字）”“颜色：继承；字体重量：正常；显示：灵活；灵活：无；对齐项目：灵活开始；对齐内容：灵活结束；右填充：0.8em；}
ol[数据子节]{}
ol[数据分段]li{}
ol[数据子节]li:在{content:counters（number，“.”“）之前}
ol[data subsections]>li{font-weight:bold；}
ol[data subsections]>li:before{font-weight:bold；}
ol[数据子部分]ol{width:100%；flex:none；padding:1em 0；font-weight:normal；}

有序列表，子部分
ol数据子部分
A

分段
分段
分段
分段
分段

分段

C
D
E
F
我将使用Flexbox元素，正如我在下面代码中所示，取自本网站：


ol，ul{display:flex；flex-direction:column；flex-wrap:nowrap；对齐内容：flex-start；边距：1em 0px；填充：0；列表样式：none；}
li{显示：柔性；线高度：1.5；位置：相对；}
ol{计数器重置：数字}
ol>li{}
ol>li:在{计数器增量：数字；内容：“计数器（数字）”“颜色：继承；字体重量：正常；显示：灵活；灵活：无；对齐项目：灵活开始；对齐内容：灵活结束；右填充：0.8em；}
ol[数据子节]{}
ol[数据分段]li{}
ol[数据子节]li:在{content:counters（number，“.”“）之前}
ol[data subsections]>li{font-weight:bold；}
ol[data subsections]>li:before{font-weight:bold；}
ol[数据子部分]ol{width:100%；flex:none；padding:1em 0；font-weight:normal；}

有序列表，子部分
ol数据子部分
A

分段
分段
分段
分段
分段

分段

C
D
E
F
如果您告诉我们您尝试了什么，哪些不起作用，可能会有所帮助。我尝试使用相对定位，并给出一个负“左”属性，但它会弄乱间距，并且与一位数与多位数不一致。这里的例子：，这里的例子：如果你告诉我们你尝试了什么，什么不起作用，可能会有所帮助。我尝试使用相对定位，并给出一个负的“左”属性，但它会弄乱间距，并且与一位数与多位数不一致。这里的示例：，这里的示例：有没有一种方法可以将其指定为实际的html元素，而不仅仅是背景url？您可以使用jQuery
before（）
动态插入该元素。有没有一种方法可以将其指定为实际的html元素，而不仅仅是背景url？可以使用jQuery
before（）
动态插入元素。谢谢，这正是我要找的。