Archived topic
Bolding the start of each list
3 replies · Started by jm1991 on June 19, 2020
Viewing posts 1–4 of 4
Hey there,
Is there a way to bold the start of each <li> e.g.
1. Some text
2. Some text
My CSS currently looks like:
ol li {
margin: 0 0 0.75em;
padding: 0 0 0 1.5em;
margin-left: 32px;
margin-right: 32px;
}If I add font-weight: bold; then that makes everything wrapped within <li>bold, which is fine in some cases, but not in every case.
I just want the number to be bold.
Thanks!
Hi there,
couple of methods:
1. HTML method - your markup would need to be like so:
<ol>
<li><span>List item</span></li>
<li><span>List item</span></li>
</ol>and then you can do this:
ol li {
font-weight: bold;
color: #ff0000;
}
ol li span {
font-weight: 400;
color: #000;
}OR
2. Pure CSS:
ol {
counter-reset: item;
}
ol>li {
list-style-type: none;
counter-increment: item;
position: relative;
}
ol>li:before {
position: absolute;
left: -1.8em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}Great. Thanks!
You're welcome
This archived topic is closed to new replies.
