icon gets cut off by border

Question

So basically I am trying to fit my active icon(star) in a progress bar but it seems to get cut off by the border. I'm not exactly sure how to fix this but if anyone knows how to fix this it would be much appreciated. I rather not rewrite the entirety of it since I got it how I want it minus the star portion.

  .c_progressBar {
    position: relative;
    display: flex;
    counter-reset: step;
    width: 163px;
    justify-content: space-between;
    left: 221px;
  }
  .c_progressBar::before,
  .progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #999999;
    z-index: 1;
  }
  .progress {
    background-color: #01539c;
    width: 0%;
    transition: 0.3s;
  }
  .progress-step {
    width: 1.1875rem;
    background-color: #999999;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .progress-step::before {
    content: "\a0";
  }
  .progress-step-active {
    background: url(https://i.ibb.co/2y8twZL/star.png) 0 0 no-repeat;
  }
  .progress-step-check {
    position: relative;
    background-color: #01539C !important;
    transition: all 0.8s;
  }
  .progress-step-check::before {
    position: absolute;
    /*content: "\2713";*/
    width: 100%;
    height: 100%;
    top: 8px;
    left: 13px;
    font-size: 12px;
  }

<div class="c_progressBar">
    <div class="progress" id="progress"></div>
    <div class="progress-step progress-step-active"></div>
    <div class="progress-step"></div>
    <div class="progress-step"></div>
    <div class="progress-step"></div>
</div>

What outcome are you after? Do you want a smaller star or a larger box? — isherwood, Jun 28 '22 at 21:02
I want the star to retain the same size as shown in the snippet. — Zesty, Jun 28 '22 at 21:03

isherwood · Accepted Answer · 2022-06-28T21:17:31.920

Background sizing seems to do the job. To maintain size, increase it on the active class. I've used some negative margin wizbang to shift position. You could also increase the size of all bullets and put some padding on the regular ones to shrink them.

.c_progressBar {
  position: relative;
  display: flex;
  counter-reset: step;
  width: 163px;
  justify-content: space-between;
  left: 221px;
}

.c_progressBar::before,
.progress {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  background-color: #999999;
  z-index: 1;
}

.progress {
  background-color: #01539c;
  width: 0%;
  transition: 0.3s;
}

.progress-step {
  width: 1.1875rem;
  background-color: #999999;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.progress-step::before {
  content: "\a0";
}

.progress-step-active {
  background: url(https://i.ibb.co/2y8twZL/star.png) 0 0 no-repeat;
  /* <-------------------------------------------------------- HERE */
  background-size: cover;
  width: 1.6rem;
  margin: -0.2rem 0 -0.2rem -0.4rem;
}

.progress-step-check {
  position: relative;
  background-color: #01539C !important;
  transition: all 0.8s;
}

.progress-step-check::before {
  position: absolute;
  /*content: "\2713";*/
  width: 100%;
  height: 100%;
  top: 8px;
  left: 13px;
  font-size: 12px;
}

<div class="c_progressBar">
  <div class="progress" id="progress"></div>
  <div class="progress-step progress-step-active"></div>
  <div class="progress-step"></div>
  <div class="progress-step"></div>
  <div class="progress-step"></div>
</div>

Awesome thank you! Just how I want it and I removed `height: 1.6rem;` since it was cutting a little bit off on the edge. Looks better now — Zesty, Jun 28 '22 at 21:15

icon gets cut off by border

1 Answers1