Make ABC Ordered List Items Have Bold Style

Question

I have an html Ordered list with type set to  A    lt ol type  A  gt     lt  ol gt    Thus  each list item will start with A  B  C  etc   I would like to style the A  B  C letters to be bold  I have tried setting font-weight bold  via css  but it didn t work  Any suggestions on how to do this

User · Answer

You could do something like this also    lt ol type  A  style  font-weight  bold   gt    lt li style  padding-bottom  8px   gt      lt  li gt    It is simple code for the beginners   This code is been tested in  Mozilla  chrome and edge

User · Answer

You could do something like this also   ol     font-weight  bold     ol  gt  li  gt        font-weight  normal      So you have no  style  attributes in your HTML

User · Answer

Are you sure you correctly applied the styles  or that there isn t another stylesheet interfering with your lists  I tried this    lt ol type  A  gt   lt li gt  lt span class  label  gt Text lt  span gt  lt  li gt   lt li gt  lt span class  label  gt Text lt  span gt  lt  li gt   lt li gt  lt span class  label  gt Text lt  span gt  lt  li gt   lt  ol gt    Then in the stylesheet   ol  font-weight  bold   ol li span label  font-weight normal     And it bolded the A  B  C etc and not the text    Tested it in Opera 9 6  FF 3  Safari 3 2 and IE 7

User · Answer

I know this question is a little old  but it still comes up first in a lot of Google searches  I wanted to add in a solution that doesn t involve editing the style sheet  in my case  I didn t have access     x000D   x000D   lt ol type  A  gt  x000D     lt li style  font-weight  bold   gt  x000D       lt p gt  lt span style  font-weight  normal   gt Text lt  span gt  lt  p gt  x000D     lt  li gt  x000D     lt li style  font-weight  bold   gt  x000D       lt p gt  lt span style  font-weight  normal   gt More text lt  span gt  lt  p gt  x000D     lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D

User · Answer

a bit of a cheat  but it works   HTML    lt ol type  A  style  font-weight  bold   gt     lt li gt  lt span gt Text lt  span gt  lt  li gt     lt li gt  lt span gt More text lt  span gt  lt  li gt   lt  ol gt    CSS   li span   font-weight  normal

User · Answer

As an alternative and superior solution  you could use a custom counter in a before element  It involves no extra HTML markup  A CSS reset should be used alongside it  or at least styling removed from the ol element  list-style-type  none  reset margin   otherwise the element will have two counters    lt ol gt       lt li gt First line lt  li gt       lt li gt Second line lt  li gt   lt  ol gt    CSS   ol       counter-reset  my-badass-counter    ol li before       content  counter my-badass-counter  upper-alpha       counter-increment  my-badass-counter      margin-right  5px      font-weight  bold      An example  http   jsfiddle net xpAMU 1

[html] Make ABC Ordered List Items Have Bold Style

Examples related to html

Examples related to css

Examples related to html-lists