hello there,

I am trying to create a progress bar with CSS and I want it to look something like this:

Arrow Progress Bar

So the progress bar has five basic steps and on each page a different step will be highlighted. In the first image step 1 is highlighted. What is the best way to achieve something like this with CSS keeping in mind that each arrow should be strechable. The issue I am having is that I am finding it difficult to target the preceding or ending span tag to change the front or back border. Here is my implementation and problem:

CSS implementation

Here is my code.

<ul class="progressBar">
<li class="first-child"><span class="leftBorder"></span>TEXT<span class="rightBorder"></span></li>
<li>TEXT<span class="rightBorder"></span></li>
<li>TEXT<span class="rightBorder"></span></li>
<li class="selected">TEXT<span class="rightBorder"></span></li>
<li class="last-child">TEXT<span class="rightBorder"></span></li>

My css is about 40 lines long but I think you can imagine what it looks like.

.progressBar li{background: blah;}
.progressBar li.selected{background: differentBlah;}

What is best practice for progress bars like these?

1 answer

This was chosen as the best answer

Well I found a work around but I couldn't ever figure out a true solution. Using php I added a separate class called "preselected" and that changed the css of the previous list item. It isn't a pretty solution but it works.

There has to be a better solution out there.

Answered about 6 years ago by Patrick Rauland