Skip to main content

I am trying to display a step progress bar at the top of a form. I'm trying to do it this way to not rely on a broker.
The URL of the step bar is here: http://kodhus.com/newsite/step-progress-bar-css-only/

It looks simple enough, however, the li:after element does not show. The li:before does show, as the circles have no problem showing, but the line that connects the steps (li:after) does not show.

17083iB641891965718B1B.png

(I made this quick form where I can just paste the compressed HTML and CSS and see it quickly)
But it is puzzling that it does not show the line that connects them, even though when examining the developer console, it does not indicate in any way that the element is hidden.
Does anyone have any idea why this would happen?

Just pasting the code as it is into JSFiddle works, but doesn't work in SmartForms. Inspecting the elements using Chrome tells me the li:after is somehow stacked behind everything. Here's what I used for the CSS in order for the lines to appear between each circles:


 


 .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
      position: relative;
      z-index: 1;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
  }


 


I just remove the z-index in li:after, and set z-index in li:before. But for z-index to work, you need to set position to either absolute or relative.


 

That's amazing!
Thank you.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings