CODEWITHSUNDEEP
htmlcssprogress-bar
user7424490
user7424490

Reputation:

How to style the progress bar number counter

I want to know how can I be able to style the progress bar number counter. Basically I want to make the number bold and I have tested several ways but they didn't work.

Here's the link to jsfiddle: https://jsfiddle.net/7fu0mr3t/

So how can I be able to access the counter numbers stylesheets in my css file and make some changes in order to display them in my own way!

Upvotes: 0

Views: 392

Answers (3)

GMKHussain
GMKHussain

Reputation: 4671

just add this "font-weight: bold;"

.progressbar li:before {
    font-weight: bold;
}

Upvotes: 0

Rahul
Rahul

Reputation: 4364

you can style them with two ways see fiddle

.progressbar li.active:before {
    color: blue;
    font-style: italic;
}
.progressbar li:before{
  color: red;
}

https://jsfiddle.net/7fu0mr3t/4/

Upvotes: 0

Thomas Rbt
Thomas Rbt

Reputation: 1538

.progressbar li:before {
    font-weight: bold;
    color: red;
}

Numbers are added in the before, they are not in the html :-)

Fiddle: https://jsfiddle.net/7fu0mr3t/3/

Upvotes: 2

Related Questions