LearnDash Progress Bar: How to show "X out of Y steps completed"

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

The LearnDash progress bar does an OK job at visually representing a student’s progress, but there are ways to improve it. If you have 50 or more steps in your course, the progress bar itself might not be the best indicator.

Like the stripes? 😍 Here’s how I did it.

In this tutorial, I’m going to show you how to use a little CSS to display “X out of Y steps completed” below (or above) your LearnDash progress bar.

If you want to see how you can do this without any coding, PLUS spice up your entire progress bar with custom colors & styles, check out this video.

1. Allow Content to Overflow Outside the Progress Bar

The first thing we need to do is allow content to overflow outside of the progress bar area. To do this, we’ll use overflow property, and set it to visible. We do this on the <dd> element, which is the element that contains the title attribute that we need to tap into.

2. Display the Steps

Now we’ll use the CSS pseudo-element :after, along with the CSS content property, to actually output the content.

The CSS content property can accept the value of any HTML attribute. In this case, we’re using the title attribute. That’s where attr(title) comes from. “attr” is for attribute, and “title” tells CSS which HTML attribute to grab.

dd.course_progress:after {
	content: attr(title);
}

Technically, that will output “X out of Y steps completed,” but it’s not at all positioned where we want it. Let’s position it nicely under the progress bar.

3. Position the Steps

Since the progress bar wrapper already has a CSS position of relative, we can use absolute positioning on the :after pseudo-element to place our steps exactly where we want them. We use left and bottom values to move the text, and set it to display: block; so that it starts fresh on its own line.

dd.course_progress:after {
	position: absolute;
	left: 0;
	bottom: -22px;
	display: block;
}

You might need to adjust the bottom value slightly. This will depend on some of your theme’s styles, as well as which font you are using. Move it up or down a few pixels until it’s just right.

TIP
To move the steps above the progress bar, simply change the word bottom to top.

Speaking of getting it just right…

4. Finishing Touch

We’ll add a few more styles to finish it off. I’ve reduced the font-size to 80% and given it a left & right padding of 2px, which moves it just slightly in from the edges of the progress bar.

5. The Complete Code

Here’s the code in its entirely:

dd.course_progress {
	overflow: visible;
}
dd.course_progress:after {
	position: absolute;
	content: attr(title);
	left: 0;
	display: block;
	font-size: 80%;
	padding: 0 2px;
	bottom: -22px;
}

Is there anything else you’d like to do with your progress bar? Please let us know in the comments.

The following example uses our Design Upgrade Pro for LearnDash plugin.