Bold ol list (numbers only)

1

Hi everyone,

I am working on my survey form and I’m having trouble with styling my ol - I am unable to set it up so my numbers are bold but not everything else (meaning labels), how could I accomplish that?

Here is my pen: https://codepen.io/amaranthaST/pen/xxbGxgR

Also If you have any other suggestions and advice please feel free to comment.

Thank you, Ivona

2

you could wrap each number in strong tags. or in a span with a class and style that class as you wish

1 Like
3

Hello amarantha.

First:

p {
  font-weight: 400; /*Anything lower than 500 will do
}

Second:

ol {
  font-weight: bold;
}

Hope this helps.

1 Like
4

I am trying to achive something like this:

1. Question
image

I don’t have numbers because it is ol list so I can’t use strong tags,
and if I set up ol list as bold then my labels (which are inside ol list) are also bold…

5

You can take advantage of specificity, and use the font-weight property on the labels to “restore” their weight to a normal value.

ol {
 font-weight: bold;
}
label {
 font-weight: initial;
}

As @sky020 suggested, I first thought you wanted the paragraphs to be normal, but if you want them bold, be sure to remove the font-weight property from the <p> elements.

1 Like
6 
ol {
  list-style: none;
  counter-reset: numbers 1;
}

li::before {
  counter-increment: numbers;
  content: counter(numbers);
  font-weight: bold;
}

I’ve not changed any padding/margin or other values, so this will look a bit skew-whiff as-is, you’ll need to add more styling to make it look ok, but it gives you the bold counters.

Edit: note that there’s no point using an ol here once you have counters:

.container-for-radios {
  display: flex;
  counter-reset: numbers 1;
}

.radio::before {
  counter-increment: numbers;
  content: counter(numbers);
  font-weight: bold;
}

<div class="container-for-radios">
  <input type="radio" class="radio" ...
1 Like
7

Thank you, I’ll try this

8

You have grouped the radio buttons inside the same label, they can’t share the same label.

If you give them their own label you can just give them the needed styles using a class or an element selector.