htmlcsshovercss-animationsbootstrap-5

Turning The Split Border into a Complete Border During Hover in CSS

I want to create a border where the top and bottom appear like open brackets [ ], splitting into two small segments initially, and then animate to a full rectangle only on hover.

After the hover ends it want back to Normal like split border, here the problem is I can't able to split the border

The Result I Need...

The Result I Get...

enter image description here

Here is My Code

.counter {
  position: relative;
  padding: 30px 30px 25px 38px;
  display: flex;
  align-items: center;
  border-left: 10px solid #393c42;
  /* Solid left border */
  border-right: 10px solid #393c42;
  /* Solid right border */
  border-radius: 0;
  /* No rounded corners initially */
  transition: all 0.3s ease;
}

.counter:before,
.counter:after {
  content: "";
  position: absolute;
  width: 40%;
  /* Length of the border segment */
  height: 10px;
  /* Thickness of the border */
  background-color: #393c42;
  top: 0;
  /* For the top border */
  left: 0;
  /* For the left part of the top border */
  transition: all 0.3s ease;
}

.counter:after {
  top: auto;
  /* Remove the top positioning for bottom */
  bottom: 0;
  /* For the bottom border */
  left: auto;
  /* Remove left positioning */
  right: 0;
  /* For the right part of the bottom border */
}



.counter:hover:before,
.counter:hover:after {
  width: 100%;
  /* Expand borders to full width */
  left: 0;
  /* Reset for full-width hover */
  right: 0;
}
<div class="container-fluid about_us py-5 ms-5 mt-5">
  <div class="row">
    <!-- Left: Counter Section -->
    <div class="col-md-4  left d-flex align-items-center">
      <div class="counter d-flex align-items-center">
        <div class="counter-number-wrapper">
          <span class="counter-number  ps-5">25</span>
        </div>
        <div class="counter-title-wrap text-end pe-3">
          <div class="counter-title">
            <span>Years</span>
            <span>experience</span>
            <span>working</span>
          </div>
        </div>
      </div>
    </div>

Solution

  • You can use clip-path CSS property with polygon().

    In the initial state, clip the left and right side of the border.

    In the hover state change the clip to cover the whole element. By keeping the same polygon points, it can do a nice transition.

    .counter {
  position: relative;
  padding: 30px 30px 25px 38px;
  display: flex;
  align-items: center;
  border-left: 10px solid #393c42;
  /* Solid left border */
  border-right: 10px solid #393c42;
  /* Solid right border */
  border-radius: 0;
  /* No rounded corners initially */
  transition: all 0.3s ease;
}

.counter:before,
.counter:after {
  content: "";
  position: absolute;
  width: 100%;
  /* Length of the border segment */
  height: 10px;
  /* Thickness of the border */
  background-color: #393c42;
  top: 0;
  /* For the top border */
  left: 0;
  /* For the left part of the top border */
  transition: all 0.3s ease;
  clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 100% 100%, 100% 0);
}

.counter:after {
  top: auto;
  /* Remove the top positioning for bottom */
  bottom: 0;
  /* For the bottom border */
  left: auto;
  /* Remove left positioning */
  right: 0;
  /* For the right part of the bottom border */
}



.counter:hover:before,
.counter:hover:after {
  clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 100% 100%, 100% 0%);
}
       

<div class="counter">
  <div class="counter-number-wrapper">
    <span class="counter-number">25</span>
  </div>
  <div>
    <div>
      <span>Years</span>
      <span>experience</span>
      <span>working</span>
    </div>
  </div>
</div>