Javascript & HTML - Place
number after
title

Question

On my test page I've set it up to create an <li> element inside an <ol> when a <button> is pressed. Let's say the list title is "Problem". Instead of "1. Problem", I'd like it to be "Problem 1.". Is there a way to put the <ol> digit after the list title?

        <form>                                              
            <button type="button" id="btn_add_task" class="btn btn-primary" title="Lägg till fler att-satser.">+</button>       
        </form>           

            <ol id="list_tasks" style="font-style:italic; font-size: 18pt; padding: 0">
            </ol> 

            <script>            
                function $(element) {
                    return document.getElementById(element);
                }

                var taskSubmit = $('btn_add_task');
                var taskBox = $('text_task');
                var taskList = $('list_tasks');

                taskSubmit.addEventListener('click', function(e) {
                    e.preventDefault();
                    var att = 'att';
                    var attNum = 1;

                    var newLI = document.createElement('li');
                    var newText = document.createElement('textarea');

                    newLI.appendChild(document.createTextNode(att + attNum + ': '));                    

                    spanNum.id = 'val';
                    newLI.id = 'list';
                    newText.className = 'attText';
                    newText.rows = 1;

                    taskList.appendChild(newLI);
                    taskList.appendChild(newText);

                }, false);
            </script>

any code? what you tried? We need to know more... – daremachine Jan 19 '16 at 21:28 — daremachine, Jan 19 '16 at 21:28
but it seems like a css pseudo :after – daremachine Jan 19 '16 at 21:30 — daremachine, Jan 19 '16 at 21:30

score 2 · Accepted Answer · edited May 23 '17 at 12:15

Adapted from responses to this existing question on customizing <ol> list elements. You can put various things in the li:before pseudo-element, but you need to play w/the margins and padding a bit to ensure things line up & are properly spaced.

Left margin for the li itself can be used to indent & align the text content.
Left margin for li:before is negative & equal to left margin of li
Width of the li:before must accommodate the full width of the leading number & other content.
Padding of li:before sets the distance between "Problem #." and the text itself.
Text-alignment left of li:before keeps "Problem" aligned regardless how many numbers you have.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

li {
    display: block;
    margin-left: 5.5em;
    margin-bottom: 1em;
 
}

li:before {
    content: "Problem "counter(item) ".";  
    counter-increment: item;
    display: inline-block;
    text-align: left;
    width: 5em;                  
    padding-right: 0.5em;
    margin-left: -5.5em;
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

score 0 · Answer 2 · answered Jan 19 '16 at 21:30

0

The closest would be

<ol dir="rtl">

answered Jan 19 '16 at 21:30

NachoDawg

1,533
11
21

Can't do that. It will change too much. – MrOzzy99 Jan 19 '16 at 21:37
Don't know. When I tried rtl for only li, the number is way over to the right. If we can put the number closer to the normal title that'd be great :D – MrOzzy99 Jan 19 '16 at 21:40

score 0 · Answer 3 · answered Jan 19 '16 at 21:39

0

CSS

ol[dir=rtl] {
  list-style-position: inside;
}

Then HTML would be

<ol dir="rtl">
 <li>Problem</li>
 <li>Something else</li>
</ol>

answered Jan 19 '16 at 21:39

matharden

757
6
15

Nope sorry, read previous answer about the same thing. Thanks anyway :) – MrOzzy99 Jan 19 '16 at 21:41
But this CSS brings the number close to the text like you asked. – matharden Jan 19 '16 at 21:42
Oh sorry missed that part, I will give it a try! – MrOzzy99 Jan 19 '16 at 21:45

score 0 · Answer 4 · answered Jan 19 '16 at 21:45

Here a simple solution just with CSS:

http://codepen.io/anon/pen/adVPrN

HTML:

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

CSS:

ol {
  list-style: none;
  counter-reset: li;
}
ol li:after {
  counter-increment: li;
  content: " " counter(li) ".";
}

And here the MDN site for the CSS counter: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Javascript & HTML - Place number after title

4 Answers4

Javascript & HTML - Place
number after
title