CODEWITHSUNDEEP
htmlcsshtml-lists
swarajd
swarajd

Reputation: 1007

insert an element before the number in an ol in html

Is it possible to create an ordered list (could be nested), in which there are html elements to the left of each number? Here is a rough example:

enter image description here

I've played around with the :before in css but I realized that you can't insert html content there. Is it possible to do this organically or would I have to resort to some "hack" in order to achieve this.

Upvotes: 1

Views: 1896

Answers (3)

Inbal Jona
Inbal Jona

Reputation: 7

I would use Flexbox element as I show in the code below, taken from the this site : 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>

Upvotes: 0

trevorp
trevorp

Reputation: 1168

This Fiddle allows you to insert an image to the left using background in 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>

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;
}

Optional jQuery (to dynamically insert an element before the li):

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

Upvotes: 1

sn3ll
sn3ll

Reputation: 1685

You almost had it with positioning, but you need to use absolute instead of relative.

Check out this fiddle

Upvotes: 2

Related Questions