CODEWITHSUNDEEP
htmlcss
user9903025
user9903025

Reputation:

CSS - background color overflow issue

Need to remove the line which is overlapping with the progress circle. Tried putting "overflow:hidden", but didn't work.

I know it's some simple CSS trick, but not able to solve it.

Here is the code.

#msform {
  text-align: center;
  position: relative;
  margin-top: 30px
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  counter-reset: step
}

#progressbar li {
  list-style-type: none;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
  letter-spacing: 1px
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 24px;
  height: 24px;
  line-height: 26px;
  display: block;
  font-size: 12px;
  color: #333;
  background: grey;
  border-radius: 25px;
  margin: 0 auto 10px auto
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #7d6b6b;
  position: absolute;
  left: -50%;
  top: 9px
}

#progressbar li:first-child:after {
  content: none
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #ee0979;
  color: white
}
<form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
  </ul>
</form>

Upvotes: 1

Views: 51

Answers (2)

Rayees AC
Rayees AC

Reputation: 4659

Add z-index to #progressbar li:before

#progressbar li:before {
   z-index: 5;
   position: relative;
}

z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

Already answered an example

#msform{text-align:center;position:relative;margin-top:30px}#progressbar{margin-bottom:30px;overflow:hidden;counter-reset:step}#progressbar li{list-style-type:none;text-transform:uppercase;font-size:9px;width:33.33%;float:left;position:relative;letter-spacing:1px}#progressbar li:before{content:counter(step);counter-increment:step;width:24px;height:24px;line-height:26px;display:block;font-size:12px;color:#333;background:grey;border-radius:25px;margin:0 auto 10px auto;z-index: 5;
position: relative;}#progressbar li:after{content:'';width:100%;height:2px;background:#7d6b6b;position:absolute;left:-50%;top:9px}#progressbar li:first-child:after{content:none}#progressbar li.active:before,#progressbar li.active:after{background:#ee0979;color:white}
<form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
    </ul>
</form>

Upvotes: 2

Sergio Gabriel Fruto
Sergio Gabriel Fruto

Reputation: 331

This isn't an overflow issue, but a stacking order one. You just need add z-index to the li:before to bring it to the top order in the stack:

#progressbar li:before {
    position: relative; /* add this */
    z-index: 1;  /* add this */
    content: counter(step);
    counter-increment: step;
    width: 24px;
    height: 24px;
    line-height: 26px;
    display: block;
    font-size: 12px;
    color: #333;
    background: grey;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}

Upvotes: 0

Related Questions