在html中ol之前插入一个元素

Question

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

我与周围的发挥：之前在CSS中，但我意识到，你不能插入HTML内容在那里。是否有可能做到这一点，或者我会不得不采取一些“黑客”，以实现这一点。

Answer 1

你几乎与定位了吧，但你需要使用absolute，而不是relative。

看看这个fiddle

Answer 2

This Fiddle允许你在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> 

CSS：

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（以在th之前动态插入元素Ëli）：

$("li").before($('#foo')); 

Answer 3

如我在下面的代码，从这个网站采取我会用Flexbox的元素： Link to lists by Doron B.

ol, ul { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; margin: 1em 0px; padding: 0; list-style: none; } 
 
li { display: flex; line-height: 1.5; position: relative; } 
 
ol { counter-reset: numbers } 
 
ol > li { } 
 
ol > li:before { counter-increment: numbers; content: "" counter(numbers) ""; color: inherit; font-weight: normal; display: flex; flex: none; align-items: flex-start; justify-content: flex-end; padding-right: 0.8em; } 
 
ol[data-subsections] { } 
 
ol[data-subsections] li { } 
 
ol[data-subsections] li:before { content: counters(numbers,".") " " } 
 
ol[data-subsections] > li {font-weight: bold;} 
 
ol[data-subsections] > li:before {font-weight: bold; } 
 
ol[data-subsections] ol {width: 100%; flex: none; padding: 1em 0; font-weight: normal;}

<section> 
 
     <h5>Ordered list, subsections<code> ol data-subsections </code></h5> 
 
     <ol data-subsections> 
 
      <li>A</li> 
 
      <li><a href="http://www.zzzzzzz.com">B </a> 
 
       <ol> 
 
       <li>Subsection</li> 
 
       <li>Subsection 
 
        <ol> 
 
       <li>Subsection</li> 
 
       <li>Subsection</li> 
 
       <li>Subsection</li> 
 
       </ol> 
 
       </li> 
 
       <li>Subsection</li> 
 
       </ol> 
 
      </li> 
 
      <li>C</li> 
 
      <li>D</li> 
 
      <li>E</li> 
 
      <li>F</li> 
 
     </ol> 
 
     </section>