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;
}
Related
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/
I have an ordered list (a, b, c...) and want to make the background color of the actual bullets (a, b, c...) a different color. How would I style this? The list-type property seems to only change the bullets, not give them added styling. I want to maintain they type="a" structure of the list and simply add a background color to each letter.
Also...can someone share with me how to center the bullets or flush them to one side? Currently, they look a little out of line.
Using #kingkong's comment above, you can do something like this:
ul > li:before {
background-color: red;
margin-right: 5px;
padding: 0 5px;
content: counter(index, lower-alpha);
counter-increment:index;
}
li:first-child {
counter-reset:index;
}
ul li {
list-style: none;
}
Here is a fiddle: http://jsfiddle.net/2ZsQY/
http://jsfiddle.net/Ue6nu/2/
The default lower-alpha will be preserved even when :before is not supported.
ul {font: 0.85em Arial;margin:0;}
li {
list-style-position: outside;
list-style-type: lower-alpha;
position:relative;
}
li:first-child {
counter-reset:index;
}
li:before {
content: counter(index, lower-alpha) '.';
counter-increment:index;
background: #fff;
position:absolute;
left:-1.3em;
z-index:10;
display:inline-block;
width:1em;
color: red;
font-size: inherit;
font-weight:bold;
}
You can style them with the nth-child selector and pseudo elements.
ul li:before {
content: "• ";
background-color: red;
}
Fiddle demo
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: "› "; }
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/