I want to find out whether it is possible to make out the markers to create a counter.
Just what I was able to achieve can be seen here: http://jsfiddle.net/Jeen/w6V74/1/
ol {
counter-reset: level-1;
list-style: none;
padding-left: 0;
}
ol li:before {
counter-increment: level-1;
content: counter(level-1) '. ';
}
ol ol {
counter-reset: level-2;
padding-left: 15px;
}
ol ol li:before {
counter-increment: level-2;
content: counter(level-1) '.' counter(level-2) '. ';
}
ol ol ol {
counter-reset: level-3;
padding-left: 30px;
}
ol ol ol li:before {
counter-increment: level-3;
content: counter(level-1) '.' counter(level-2) '.' counter(level-3) '. ';
}
In the end, I want to get what is shown in the second image
You might want to check this page and change the way to nest your <ol>:
Proper way to make HTML nested list?
After you properly nest the list, add css below:
ol {
display: table;
}
ol > li {
display: table-row;
}
ol > li::before {
display: table-cell;
}
DEMO: http://jsfiddle.net/naokiota/95xha/
Hope this helps.
Here is one way of styling the indentations.
Modify your CSS by adding the following rules:
ol > li {
padding-left: 1.0em;
position: relative;
}
ol > ol > li {
padding-left: 2.0em;
position: relative;
}
ol > ol > ol > li {
padding-left: 3.0em;
position: relative;
}
ol li:before {
counter-increment: level-1;
content: counter(level-1) '. ';
position: absolute;
left: 0;
}
Take the generated content (ol li:before) out of the regular flow by using position: absolute.
The trick is to add some padding to the left with a suitable length to accommodate the counter label.
For each list item (ol>li, ol>ol>li, ol>ol>ol>li), set the padding-left to 1.0em, 2.0em, 3.0em respectively (or some similar values) and use position: relative to allow the generated content elements to be positioned with respect to the appropriate li parent element.
See fiddle: http://jsfiddle.net/audetwebdesign/m2vZd/
Related
How to add > before the third <li> element without adding new any classes or id's?
Here is the JsFiddle.
HTML:
<ol class="breadcrumb-tasks">
<li>Ethernet</li>
<li>Compputer</li>
<li>Design</li>
</ol>
CSS:
.breadcrumb-tasks{
padding: 0;
list-style: none;
}
.breadcrumb-tasks li {
color: #999;
display: inline-block;
}
.breadcrumb-tasks li + li:before {
color: #ccc;
content: "/\00a0";
}
For the old browsers which don't support :nth-child() pseudo class you could use adjacent sibling selector as follows:
.breadcrumb-tasks li + li + li:before {
content: ">\00a0";
}
And override the content for 4th, 5th,... list items as:
.breadcrumb-tasks li + li:before, /* selects 2nd+ list items */
.breadcrumb-tasks li + li + li +li:before { /* selects 4th+ list items */
color: #ccc;
content: "/\00a0";
}
WORKING DEMO
But for modern browsers support CSS3 selector (including IE9+):
.breadcrumb-tasks li:nth-child(3):before {
content: ">\00a0";
}
WORKING DEMO.
This way, it is always the last one (if you have more than 3).
ol li:last-child:before{
content: ">";
}
JsFiddle
li:nth-child(3):before
{
content: ">";
}
FIDDLE
.breadcrumb-tasks li:last-child:before { content: "› "; }
Is it possible to have the number (or letter or numeral etc.) of an ordered list have a different style than the content without having some kind of div or span tags inside each list element?
It's possible with setting the list-style to 'none' and replacing the default numbering with CSS counters and pseudo-elements. Example: http://jsbin.com/agagoc/1/edit
ol {
list-style: none;
counter-reset: my-awesome-counter;
}
li {
counter-increment: my-awesome-counter;
}
li:before {
content: counter(my-awesome-counter);
/* any style for numbers, as if they were spans before the content of LIs, goes here */
}
Yes, you can like this:
li {
list-style: none;
counter-increment: myCounter;
}
li:before {
content: counter(myCounter);
font-size: 19px;
color: red;
}
I'd like to left align both the numbers and the text in my <ol>. This is what I'm trying to accomplish:
For now, each <li> contains an <a>, but that can change. So far I tried putting left padding and then a text-indent on the <a>.
Here is my code as of now.
HTML:
<ol class="dinosaurs">
<li><a>Dinosaur</a></li>
<li><a>Tyrannosaurus</a></li>
<li><a>Camptosaurus</a></li>
</ol>
CSS:
.dinosaurs{
list-style-position: inside;
}
NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.
This seems to work:
.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before {
content: counter(item) ". ";
counter-increment: item;
width: 2em;
display: inline-block;
}
You could position the list elements like so:
.dinosaurs {
list-style-position: inside;
}
.dinosaurs li{
position: relative;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
which would yield http://jsfiddle.net/wBjud/2/
None of the existing answers worked for me, but by combining and building on them I found similar method that does, including for multiline entries, without requiring any tags inside list items:
ol {
counter-reset: item;
}
li {
display: block;
margin-left: 1.7em;
}
li:before {
content: counter(item) ". ";
counter-increment: item;
position: absolute;
margin-left: -1.7em;
}
Which looks like this: https://jsfiddle.net/b3dayLzo/
I think it works by putting the li:before in the left margin of the li.
You may want a different margin-left.
There's no class on the ol because in my case this appears within the style of the container.
Try adding padding-left: 0; to your style, and changing list-style-position: to outside if necessary.
You can fake it by using positioning, padding and margins.
jsFiddle example
.dinosaurs {
list-style-position: inside;
position:relative;
margin-left: -20px;
}
a {
position:absolute;
left:70px;
}
If you use list-style-position: inside; the number is placed inside the block of text. To adjust the position of the number and keep ident of the text use this css.
ol {
list-style: none;
counter-reset: step-counter;
padding-inline-start: 25px;
}
ol > li {
counter-increment: step-counter;
}
ol > li:before {
content: counter(step-counter)".";
display: inline-block;
position: absolute;
margin-left: -25px;
}
To keep your bullets also to the left
ul {
list-style: none;
padding-inline-start: 25px;
}
ul > li:before {
content: '\25cf';
position: absolute;
margin-left: -25px;
}
Is it possible to arrange the ol list numbers (2 digit numbers) to start from the left side.
Usually it comes like this
1
2
.
.
10
12
But I need that to show like this
May be you can use counter -increment for this. Write like this:
ul{ counter-reset: chapter 0; }
li:before{
counter-increment: chapter;
content:counter(chapter) ". ";
width:20px;
display: inline-block;
text-align: right;
}
Check this http://jsfiddle.net/upc6b/
You can use CSS counters:
CSS:
ol {
padding-left: 40px;
list-style: none;
counter-reset: number;
}
ol li:before {
display: inline-block;
content: counter(number) '.';
counter-increment: number;
width: 30px;
}
The only problem with this approach is that the width of the number area is fixed, so it will not expand as the number of elements grows.
Demo: http://jsfiddle.net/Blender/UG5Y4/2/
Quite simply, I want an ordered list to work like this:
1. Foo
2. Bar
3a. Baz
3b. Qux
4. Etc...
Is there any way to easily do something along these lines in HTML?
Given the following mark-up:
<ol>
<li>Foo</li>
<li>
<ol>
<li>bar</li>
<li>baz</li>
</ol>
</li>
<li>Something else...</li>
</ol>
The following CSS almost works:
ol {
counter-reset: topLevel;
}
li {
counter-increment: topLevel;
margin-left: 1em;
}
li::before {
content: counter(topLevel) '. ';
margin-right: 0.3em;
}
ol ol {
counter-reset: secondLevel;
}
ol ol li {
counter-increment: secondLevel;
}
ol ol li::before {
content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}
JS Fiddle demo.
The only problem with this, so far, is that it contains the topLevel count against both the inner li elements (as you wanted), but also against the outer li (that contains those inner elements), so...not quite there, yet.
And the above problem resolved! ...in those browsers that support the CSS :not() selector:
ol {
counter-reset: topLevel;
}
li {
counter-increment: topLevel;
margin-left: 1em;
}
li:not(.hasChild)::before {
content: counter(topLevel) '. ';
margin-right: 0.3em;
}
ol ol {
counter-reset: secondLevel;
}
ol ol li {
counter-increment: secondLevel;
}
ol ol li::before,
ol li.hasChild ol li::before {
content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}
JS Fiddle demo.
I forgot (originally) to note that for this to work (because CSS doesn't have a parent selector (as yet) I had to add a specific class to those li elements with child ol elements in order to appropriately hide the duplication of the number. In this case I chose the class-name .hasChild (as can be seen in the Fiddle).
Incidentally, a small change to the li:not(.hasChild)::before rules, allows for the right-aligned text:
li:not(.hasChild)::before {
content: counter(topLevel) '. ';
width: 2em;
margin-right: 0.3em;
display: inline-block;
text-align: right;
}
JS Fiddle demo.
It doesn't meet your requirements fully and requires some (annoying) changes to your html, but I think it's about as close as you'll get.
http://jsfiddle.net/qGCUk/30/
<ol>
<li>one</li>
<li class="has_children">
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
</ol>
ol,li{
padding:0;
margin:0;
}
ol { counter-reset: item }
li { display: block; padding-left: 0 }
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
LI.has_children:before {
content: " ";
counter-increment: item
}
This is only numbers, as I don't think you can mix numbers and letters. And since there is no selector to select and li which contains and ol, you have to add a class to any li which has a child ol.