[FIXED] When i use transform translate than my border height increase more 1px how to solve it?

Issue

I wast try to set 1px separator with vertically center using transform: translate(-50%, -50%); and top: 50%; but working fine for vertically center but my separator height increase with 1px more so my separator total height display 2px so any solution for that issues. this structure is fixed so please help me.

Thanks in adavance.

.number {
  font-size: 50px;
  line-height: 56px;
  font-weight: bold;
}
.title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}
.separator-line {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 60%;
    background-color: #000;
    height: 1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container">
      <div class="row my-5">
        <div class="col-3 text-center px-3">
          <div class="position-relative mb-4">
              <span class="separator-line"></span>
              <div class="number">01</div>
          </div>
          <span class="d-block title mb-3">Completed Project</span>
          <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">02</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">03</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <div class="number">04</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
    </div>
  </div>
</section>

Solution

Change CSS use This transform: translateX(-50%); for .separator-line

.number {
  font-size: 50px;
  line-height: 56px;
  font-weight: bold;
}
.title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}
.separator-line {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 60%;
    background-color: #000;
    height: 1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container">
      <div class="row my-5">
        <div class="col-3 text-center px-3">
          <div class="position-relative mb-4">
              <span class="separator-line"></span>
              <div class="number">01</div>
          </div>
          <span class="d-block title mb-3">Completed Project</span>
          <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">02</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">03</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <div class="number">04</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
    </div>
  </div>
</section>

Answered By - Prakash Software

Answer Checked By - David Marino (PHPFixing Volunteer)