icon gets cut off by border

June 29, 2022

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>

>Solution :

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>