I need to indent an ordered list to keep the parent list items numbering:
What I have:
// My code:
<ol>
<li>Item 1</li>
<li>
Item 2
<ol>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ol>
</li>
<li>Item 3</li>
</ol>
And so forth.
What i'm getting as a result now is:
// Result:
1. Item 1
2. Item 2
Item 1
Item 2
3. Item 3
What i'm looking for is:
// Looking for:
1. Item 1
2. Item 2
2.1 Item 2.1
2.2. Item 2.2
3. Item 3
Any ideas?
You can use counters to do so:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
Inspired by DON's answer, I played around with the counters property and managed to get the following working:
ol {
counter-reset: item;
list-style-type: none;
}
ol li:before {
font-weight: bold;
content: counters(item,".")". ";
counter-increment: item;
}
ol ol {
counter-reset: subitem;
list-style-type: none;
}
li li:before {
content: counters(item,".")"."counters(subitem,".")". ";
counter-increment: subitem;
}
I'm not convinced that this is the most clean cut solution because I don't know the content element that well but this will definately give you an ordered list which incremints sub level list items according to their parent containers last list item.
Related
I want to create a ordered list that looks like
1.0
1.1
1.11
Currently I get
1
1.1
1.1.0.11
/* First, set all numbered lists to use counter-reset */
OL { counter-reset: item }
/* Display all list items in a numbered list in block display */
LI { display: block }
/* Use a counter that checks the number of items and adds a "." between them and ends with ". " */
LI:before { content: counters(item, ".") " "; counter-increment: item }
/* */
ol ol ol {counter-reset: item 10; }
ol ol ol:nth-child(1) {counter-reset: item 10;}
<ol>
<li>Test Level 1</li>
<ol>
<li>Test Level 2</li>
<ol>
<li>Test Level 3</li>
<li>Test Level 4</li>
<li> </li>
</ol>
</ol>
</ol>
I have an ordered list that I have incrementing by 1. What I am trying to do is get it to increment by 1 with a dot after the 1:
1.
2.
3.
4
Within my list I have it working like,
1
1.1
1.2
1.3
2
2.1
2.2
3
3.1
3.2
3.3
So that Is correct I just want the number at the beginning to also have a . at the end.
My current code looks something like this:
ol {
counter-reset: item ;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
float: left;
}
<ol>
<li>
<ol>
</ol>
</li>
</ol>
So it should end up looking like:
1.
1.1
1.2
1.3
2.
2.1
2.2
2.3
3.
3.1
3.2
3.3
Here's a Fiddle of what you want.
All I did was change the CSS so that the ordered-list-items have a period at the end, unless they're deeper than 1 level. Fairly simple.
ol li::before {
content: counters(item, ".") ". ";
counter-increment: item;
}
ol ol li::before {
content: counters(item, ".") " ";
}
No need for extra, unnecessary classes.
Hope this helps
If you want the numbers to have a dot at the end change your css to
li:before {
content: counters(item, ".") ".\00a0 ";
}
\00a0 adds space (" " doesn't worked for me).
Edit: Regarding the discussion: give an extra class to the first level and use above CSS (see Codepen).
http://codepen.io/anon/pen/MKOOjv
There is already a topic solving this issue
Achieving sub numbering on ol items html
Credits to Joey
ol { counter-reset: item }
ol>li { display: block }
ol>li:before { content: counters(item, ".") ". "; counter-increment: item }
<ol>
<li>
Tome 1
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
</ol>
</li>
</ol>
ol {
counter-reset: item ;
}
li {
display: block;
}
li:before {
content: counters(item, ".") ".";
counter-increment: item;
float: left;
margin-right:10px;
}
<ol>
<li>Test1
<ol>
<li>Test1.1</li>
<li>Test1.2</li>
<li>Test1.3</li>
</ol>
</li>
<li>Test2</li>
<li>Test3</li>
</ol>
I've amended the snippet above. You simply needed to add a "." in the second part of the "content" attribute. I also stuck a margin in there to make it obvious.
I use Nested counter to create a html ordered list.
This is my code:
http://jsfiddle.net/Katalhama/YpgfF/
I expect this output
0. zero
0.1 zero.one
1. one
1.1. one.one
1.2. one.two
1.3. one.three
2. two
2.1 two.one
2.2 two.two
2.2.1 two.two.one
2.2.2 two.two.two
3. three
But instead I got this:
0. zero
0.0 zero.one
1. one
1.0 one.one
1.1 one.two
1.2 one.three
2. two
2.0 two.one
2.1 two.two
2.1.0 two.two.one
2.2.1 two.two.two
3. three
I want to start with a 0 index, but i wanna sublists index start at 1. My only thought is using two counters, but i'm not familiar with advanced CSS yet and i don't know howw to manage them :(
Thanks all!
There are 2 problems in your code. The first is very serious. The HTML code is in fact invalid. The ol can only contains li elements as direct children. But you added ol elements as direct children of ol. You have to wrap the ol elements inside the li elements. The second problem is the problem you asked for. To achieve what you want, we can set the counter-reset differently for the outermost ol and others ol:
HTML:
<ol id='list'>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three</li>
<li>four
<ol>
<li>four.one</li>
<li>four.two
<ol>
<li>four.two.one</li>
<li>four.two.two</li>
</ol>
</li>
</ol>
</li>
<li>five</li>
</ol>
CSS:
#list {
counter-reset: item -1;
}
ol {
counter-reset: item;
padding-left: 10px;
}
LI { display: block }
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
Demo 1
Without using an id for the outermost ol, you can do something like this:
ol {
counter-reset: item -1;
}
ol ol {
counter-reset: item;
padding-left: 10px;
}
LI { display: block }
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
Demo 2
Here is another approach:
ol {
counter-reset: item -1;
}
LI { display: block }
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
ol ol li:first-child:before {
counter-increment: item 2;
}
Demo 3
To get the correct numbers for the example on JS Fiddle, change the counter-reset to item 0;
CSS
OL {
counter-reset: item 0;
padding-left: 10p;
}
LI {
display: block
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
And your OL's need to be inside your LIs, you can't have an OL inside an OL
HTML:
<body>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
</body>
No no your HTML (in the fiddle) is broken. As you mentioned in the title your <ol>'s should be nested, so that means inside other li's, like this
<ol>
<li>Two
<ol>
<li>Two.one</li>
</ol>
</li>
</ol>
At the moment your ol's are direct children of your other ol's. Ol's may only have li's as children (or script tags). So at the moment you have this.
<ol>
<li>Two</li>
<ol>
<li>Two.one</li>
</ol>
</ol>
When you've changed it to the first codeblock in this answer, you can apply different CSS for nested li's, like this:
ol { counter-reset: item -1 }
ol li ol { counter-reset: item 0 }
Demo here: http://jsfiddle.net/kevinvanlierde/YpgfF/1/
By editing Tyblitz HTML structure..which was not showing proper result.
<body>
<ol>
<li>zero</li>
<li>one
<ol>
<li>one.one</li>
<li>one.two</li>
<li>one.three</li>
</ol>
</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two
<ol>
<li>two.two.one</li>
<li>two.two.two</li>
</ol>
</li>
</ol>
</li>
<li>three</li>
</ol>
</body>
CSS
OL { counter-reset: item -1; padding-left: 10px; }
ol li ol { counter-reset: item 0; }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
JSFiddel
I use nested counters and scope to create an ordered list:
ol {
counter-reset: item;
padding-left: 10px;
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two</li>
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
<li>four</li>
</ol>
I expect the following outcome:
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four
Instead, this is what I see (wrong numbering):
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
2.1 three.one
2.2 three.two
2.2.1 three.two.one
2.2.2 three.two.two
2.3 four
I have no clue, does anyone see where it goes wrong?
Here is a JSFiddle: http://jsfiddle.net/qGCUk/2/
Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/
The CSS reset used in that defaults all list margins and paddings to 0
UPDATE http://jsfiddle.net/qGCUk/4/ - you have to include your sub-lists in your main <li>
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
Use this style to change only the nested lists:
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
Check this out :
http://jsfiddle.net/PTbGc/
Your issue seems to have been fixed.
What shows up for me (under Chrome and Mac OS X)
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four
How I did it
Instead of :
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
Do :
<li>Item 1</li>
<li>Item 2
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
This is a great solution! With a few additional CSS rules you can format it just like an MS Word outline list with a hanging first line indent:
OL {
counter-reset: item;
}
LI {
display: block;
}
LI:before {
content: counters(item, ".") ".";
counter-increment: item;
padding-right:10px;
margin-left:-20px;
}
Keep it Simple!
This is a Simpler and Standard solution to increment the number and to retain the dot at the end.
Even if you get the CSS right, it will not work if your HTML is not correct. see below.
CSS
ol {
counter-reset: item;
}
ol li {
display: block;
}
ol li:before {
content: counters(item, ". ") ". ";
counter-increment: item;
}
SASS
ol {
counter-reset: item;
li {
display: block;
&:before {
content: counters(item, ". ") ". ";
counter-increment: item
}
}
}
HTML Parent Child
If you add the child make sure it is under the parent li.
Will not work ✘
Notice the parent li and the child ol li are individual here, this will not work.
<ol>
<li>Parent 1</li> <!-- Parent has open and close li tags -->
<ol>
<li>Child</li>
</ol>
<li>Parent 2</li>
</ol>
Will work ✔
You need to place the ol li child element inside parent li. Notice the parent li is hugging the child.
<ol>
<li>Parent 1 <!-- Parent open li tag -->
<ol>
<li>Child</li>
</ol>
</li> <!-- Parent close li tag -->
<li>Parent 2</li>
</ol>
After going through other answers I came up with this, just apply class nested-counter-list to root ol tag:
sass code:
ol.nested-counter-list {
counter-reset: item;
li {
display: block;
&::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
}
ol {
counter-reset: item;
& > li {
display: block;
&::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
}
}
}
css code:
ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
ol.nested-counter-list ol > li {
display: block;
}
ol.nested-counter-list ol > li::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
ol.nested-counter-list ol>li {
display: block;
}
ol.nested-counter-list ol>li::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
<ol class="nested-counter-list">
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
And if you need trailing . at the end of the nested list's counters use this:
ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
<ol class="nested-counter-list">
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
I think that these answers are over-complicating this. If you don't need to support Internet Explorer, then the solution is a one-liner:
ol > li::marker { content: counters(list-item, '.') '. '; }
<ol>
<li>one</li>
<li>two</li>
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
<li>four</li>
</ol>
See the ::marker CSS pseudo-element page and the Using CSS counters page on MDN's CSS reference website for more information.
I encountered similar problem recently. The fix is to set the display property of the li items in the ordered list to list-item, and not display block, and ensure that the display property of ol is not list-item. i.e
li { display: list-item;}
With this, the html parser sees all li as the list item and assign the appropriate value to it, and sees the ol, as an inline-block or block element based on your settings, and doesn't try to assign any count value to it.
Moshe's solution is great but the problem may still exist if you need to put the list inside a div. (read: CSS counter-reset on nested list)
This style could prevent that issue:
ol > li {
counter-increment: item;
}
ol > li:first-child {
counter-reset: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
<ol>
<li>list not nested in div</li>
</ol>
<hr>
<div>
<ol>
<li>nested in div</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
</div>
You can also set the counter-reset on li:before.
Thank you everyone above for their answers!
As I needed RTL solution, I found out that this can solve it:
ol.nested-counter-list li {
display: block;
unicode-bidi: bidi-override;
}
So you would use any of the solution above, but also update the specific CSS selector for RTL cases.
Can an ordered list produce results that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with CSS? So far, using list-style-type:decimal has produced only 1, 2, 3, not 1.1, 1.2., 1.3.
You can use counters to do so:
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
Example
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
See Nested counters and scope for more information.
None of solutions on this page works correctly and universally for all levels and long (wrapped) paragraphs. It’s really tricky to achieve a consistent indentation due to variable size of marker (1., 1.2, 1.10, 1.10.5, …); it can’t be just “faked,” not even with a precomputed margin/padding for each possible indentation level.
I finally figured out a solution that actually works and doesn’t need any JavaScript.
It’s tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
CSS:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
Example:
Try it on JSFiddle, fork it on Gist.
The chosen answer is a great start, but it essentially forces list-style-position: inside; styling on the list items, making wrapped text hard to read. Here's a simple workaround that also gives control over the margin between the number and text, and right-aligns the number as per the default behaviour.
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
JSFiddle: http://jsfiddle.net/3J4Bu/
The solutions posted here did not work well for me, so I did a mixture of the ones of this question and the following question: Is it possible to create multi-level ordered list in HTML?
/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
Result:
Note: the screenshot, if you wish to see the source code or whatever is from this post: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
Note: Use CSS counters to create nested numbering in a modern browser. See the accepted answer. The following is for historical interest only.
If the browser supports content and counter,
.foo {
counter-reset: foo;
}
.foo li {
list-style-type: none;
}
.foo li::before {
counter-increment: foo;
content: "1." counter(foo) " ";
}
<ol class="foo">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ol>
In the near future you may be able to use the ::marker psuedo-element to achieve the same result as other solutions in just one line of code.
Remember to check the Browser Compatibility Table as this is still an experimental technology.
At the moment of writing only Firefox and Firefox for Android, starting from version 68, support this.
Here is a snippet that will render correctly if tried in a compatible browser:
::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
You may also want to check out this great article by smashingmagazine on the topic.
The following worked for me:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ") ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") ") ";
}
Look at: http://jsfiddle.net/rLebz84u/2/
or this one http://jsfiddle.net/rLebz84u/3/
with more and justified text
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
Result:
http://i.stack.imgur.com/78bN8.jpg
I have some problem when there are two lists and second one is inside DIV
Second list should start at 1. not 2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364/
EDIT:
I solved the problem by this
http://jsfiddle.net/hy5f6161/
this is proper code if you want to first child li resize of other css.
<style>
li.title {
font-size: 20px;
counter-increment: ordem;
color:#0080B0;
}
.my_ol_class {
counter-reset: my_ol_class;
padding-left: 30px !important;
}
.my_ol_class li {
display: block;
position: relative;
}
.my_ol_class li:before {
counter-increment: my_ol_class;
content: counter(ordem) "." counter(my_ol_class) " ";
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
li.title ol li{
font-size: 15px;
color:#5E5E5E;
}
</style>
in html file.
<ol>
<li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
<ol class="my_ol_class">
<li>
<p>
my text 1.
</p>
</li>
<li>
<p>
my text 2.
</p>
</li>
</ol>
</li>
</ol>
I was after adding numbered list to Python Markdown's TOC Extension.
I did something like this:
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
I am not sure it is the correct way, but it worked for me.
I needed to add this to the solution posted in 12 as I was using a list with a mixture of ordered list and unordered lists components. content: no-close-quote seems like an odd thing to add I know, but it works...
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}