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.

LearnDash progress bar with steps shown

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.

Before we get into the CSS, you might be wondering…

Where do you find the “X out of Y steps completed” language? I don’t see it anywhere on the page.

Well, if you look in the source code, LearnDash hides it in the title attribute of the outer progress bar wrapper (<dd>). Most browsers will display the title attribute if you hover your mouse over the element for about 2 seconds. That’s all fine and dandy, but we want to actually display it!

Here’s the HTML code I’m referring to. See the steps listed in there?

<dd class="course_progress" title="3 out of 8 steps completed">
	<div class="course_progress_blue" style="width: 37%;"></div>
</dd>

Now we’re going to use a little CSS trickery to extract the steps from the title attribute and display them right on the page itself. 🤯

NOTE
The following CSS should be placed in the style.css file of a child theme, or the “Additional CSS” area of the WordPress Customizer.

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.

dd.course_progress {
	overflow: visible;
}

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.

dd.course_progress:after {
	font-size: 80%;
	padding: 0 2px;
}

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.