Can you style ordered list numbers?
You can do this using CSS counters, in conjunction with the :before
pseudo element:
ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; }
<ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li></ol>
How to do css style for ordered list numbers?
custom-counter
is an invalid selector and even if it was valid, it would be pointing to nothing. Just remove that whole ruleset and then add list-style-type: none;
to the <ol>
as in:
ol {list-style-type: none;}
Assign position:relative
to all <li>
and position:absolute
to each li::before
in order to have granular control over all bullet distances from text.
li {
position: relative;
...
}
li::before {
...
position: absolute;
top: -1px;
/* Adjust < -number | number+ > */
left: -32px;
...
:root { font: 400 16px/1.25 Verdana}
ol { list-style-type: none;}
ol li { counter-increment: step-counter; position: relative; margin: 10px 0 0 0;}
ol li::before { content: counter(step-counter); display: block; position: absolute; top: -1px; /* Adjust < -number | number+ > */ left: -32px; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; background-color: rgb(0, 200, 200); color: white; font-weight: bold; font-size: 0.8rem; text-align: center; border-radius: 15px;}
<ol> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li></ol>
How to style the number on a html list?
It can be done using CSS3 but not 100% cross browser (namely IE7). using the pseudo :before element and counter-reset and counter-increment you can hide the list-style and create your own.
here is an article outlining how: Styling ordered list numbers
and here is a demo built from that article.
Also in case of the dreaded link rot - here is the main CSS code required (this can be applied to any ordered list)
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#f6f6f6;
}
ol > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
This code will produce a custom ordered list; albeit not the style you asked for. I will leave the customization work upto you :) cheers
Styling numbers of outside ordered list
Firstly, it's not list-position-style
it's list-style-position
. Anyway, just list-style: none;
it so that to hide the numbers, then apply position: relative;
to li
and position: absolute;
to its :before
. Just take a look on what I have done below:
ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; position: relative; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; position: absolute; left: -25px; }
<ol> <li><span>blah blah blah.</span> <ol type="a" class="ol substeps"> <li>blah blah</li> <li>blah</li> </ol></li> <li>blah blah blah blah</li></ol>
Can you style ordered list numbers in javascript?
You can add a class to list items you want to highlight.
document.querySelector('ol').children[1].classList.add('highlight');
li.highlight::marker {
color: red;
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
Can I style numbering an ordered list that has a start attribute value?
You can simulate this using CSS variable that you set instead of start
and use it to reset the counter. For semantic purpose you can also keep start
attribute.
.custom { margin: 0; padding: 0; list-style-type: none; counter-reset: step-counter calc(var(--start) - 1);}
.custom li { counter-increment: step-counter; margin-bottom: 10px;}
.custom li::before { content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(0, 200, 200); color: white; font-weight: bold; padding: 3px 8px; border-radius: 3px;}
<ol style="--start:6" start="6" class="custom"> <li>This is the sixth item</li> <li>This is the seventh item</li> <li>This is the eighth item</li> <li>This is the ninth item</li> <li>This is the tenth item</li></ol>
Can you style ordered list numbers in javascript? If so, how?
While JS cannot directly alter the color of the marker as it's a pseudo element, not actually in the DOM, we can get it to set a CSS variable of the actual 'real' element and use that to change the color in the pseudo element.
#thelistitem {
color: blue;
}
#thelistitem::marker {
color: var(--color);
}
<ol>
<li id="thelistitem">
Hello there!
</li>
</ol>
<button onclick="document.getElementById('thelistitem').style.setProperty('--color', 'red');">Click me</button>
How can you customize the numbers in an ordered list?
This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):
ol { counter-reset: item; margin-left: 0; padding-left: 0;}li { display: block; margin-bottom: .5em; margin-left: 2em;}li::before { display: inline-block; content: counter(item) ") "; counter-increment: item; width: 2em; margin-left: -2em;}
<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>
How to localize decimal numbers of an ordered lists?
You are probably looking for "list-style: arabic-indic;".
You can see all available styles here: https://mdn.github.io/css-examples/counter-style-demo/
There is also a draft spec to create your own symbols for numbered lists, but it is only supported in the latest Firefox so far. See https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
Also a better reference for the list-style-type CSS attribute can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Related Topics
Perspective and Translatez Moves Diagonally
Rounded Side, Not Rounded Corners
Combining Border-Top,Border-Right,Border-Left,Border-Bottom in CSS
Flexbox VS Tables, Why Do We Need Flexbox
Fit Div Size to Background Image
Make Column and Main Content Stay on Left or Right, as Browser Is Resized
Bootstrap 4 Responsive Tables Won't Take Up 100% Width
CSS Spec: Block-Level Box, Block Container Box and Block Box
Immediate Child Selector in Less
The Behaviour of Top: Auto; Bamboozles Me
Media Queries and Background Images
How to Fix Internet Explorer 7 Bug When Using Percentage Widths for Layout
CSS Class Repetition to Increase Specificity
Change Parent Div on Input[Type=Checkbox]:Checked with CSS
Assign CSS Attributes According to Class "Range"