What is the code in CSS for making numerical part of OL Bold?

HTML & CSS
1

Hello,

I want to make the numerical part of the Order list to be in Bold.
Not the text that is in front of the numerical part, but just the numerical part.

What is the code for doing this in CSS?

To be exact if I add this code:

ol {
list-style-type: upper-roman;
font-weight: bold;
}

Then it makes the entire order list, including the text, Bold, and I just want to make the numerical
part of the old Bold.

Thanx,

2 
<ol>
	<li><span>item</span></li>
	<li><span>item</span></li>
	<li><span>item</span></li>
	<li><span>item</span></li>
</ol>

ol {
	list-style-type: upper-roman;
	font-weight: bold;
}
	li span { font-weight: normal; }
3

Thanks.
This works pretty much as I wanted to.

FYI, I rather to have had a code that got the job done in CSS code
only and did not need alteration to the HTML since there so are many
OL instances in the pages.

But if that is not possible, then this will have to do.

Have a good day :slight_smile:

4

There’s no CSS-only way to do it. You could, however, use Javascript to insert the <span> items for you. That would only require modifying the header, and not the content itself.

5

I see.
I am weary of Javascript since it behaves too differently across browsers,
specially across MaC. So I guess I will stay with the CSS/PHP solution.

Regards,

6

Not sure what experience you have with Javascript, but I know jQuery could easily add the spans in all browsers.

7

There is a way to do it with CSS only, but it’s only supported by modern browsers and it’s not easy to achieve the right styling in Firefox since it’s very limited in what you can do with generated content.

The following works decently in Opera, Firefox 3, Safari and Chrome. It won’t work in IE7 or older, and I don’t have access to IE8 for testing.

<ol>
  <li>First item<br>spanning two lines</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

ol {
  margin:0 0 1.5em;
  padding:0;
  counter-reset:item;
}

ol>li {
  margin:0;
  padding:0 0 0 2em;
  text-indent:-2em;
  list-style-type:none;
  counter-increment:item;
}

ol>li:before {
  display:inline-block;
  width:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}