Can I Style Numbering An Ordered List That Has A Start Attribute Value?
Here's the problem: I have an ol li ordered list with a start attribute like so: I get the following output on the browser: Is it possible to serialize the list-style numbering o
Solution 1:
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>
Solution 2:
li tag have no access to parent attribute.
This is the best way i saw, using content: attr()
.custom {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: attr(data-idx);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol class="custom">
<li data-idx="6">This is the sixth item</li>
<li data-idx="7">This is the seventh item</li>
<li data-idx="8">This is the eighth item</li>
<li data-idx="9">This is the ninth item</li>
<li data-idx="10">This is the tenth item</li>
</ol>
Solution 3:
I've added a few rules to your CSS. The most important is this:
.custom{counter-reset:start 5;}
This will make the list to start at 5+1 = 6
.custom {
margin: 0;
padding: 0;
list-style-type: none;
counter-reset:start 5;/*This*/
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
counter-increment: start;/*This*/
}
.custom li::before {
content:counter(start);/*This*/
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol 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>
Solution 4:
Here is my jank solution.
Prepend with js x li's at the beginning of the ol. Then hide them by positionning them absolute and throwing them to the moon.
$('ol[start]').each(function(){
var start = $(this).attr('start');
//console.log(start);
for(var i=1;i<start;i++){
$(this).prepend('<li class="hidden"></li>');
}
})
ol{
counter-reset: items;
padding:0;
padding-left: 46px;
}
ol li {
display: block;
counter-increment: items;
text-indent: -22px;
margin-bottom: 25px;
}
ol li.hidden{
visibility:hidden;
position:absolute;
left:-999vw;
}
ol li:before {
content: "0" counter(items)". ";
color:green;
display:inline-block;
width:22px;
font-size:14px;
}
ol li:nth-child(n+10):before {
content: "" counter(items)". ";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol start="4">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>
Post a Comment for "Can I Style Numbering An Ordered List That Has A Start Attribute Value?"