<div class="container">
  <div class="box" style="--clr:#fc5f9b;">
    <div class="content">
      <div class="icon"><ion-icon name="color-palette-outline"></ion-icon></div>
      <div class="text">
        <h3>web前端开发</h3>
        <p>5个项目</p>
      </div>
    </div>
  </div>
  <div class="box" style="--clr:#a362ea;">
    <div class="content">
      <div class="icon"><ion-icon name="code-slash-outline"></ion-icon></div>
      <div class="text">
        <h3>网页设计</h3>
        <p>10个项目</p>
      </div>
    </div>
  </div>
  <div class="box" style="--clr:#0ed095;">
    <div class="content">
      <div class="icon"><ion-icon name="earth-outline"></ion-icon></div>
      <div class="text">
        <h3>UI设计</h3>
        <p>12个项目</p>
      </div>
    </div>
  </div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f7f7f7;
}
.container
{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.container .box 
{
  position: relative;
  background: #fff;
  width: 400px;
  height: 100px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.025);
}
.container:hover .box:nth-child(1)
{
  transform: translateX(-70px);
}
.container:hover .box:nth-child(3)
{
  transform: translateX(70px);
}
.container .box::before 
{
  content: '';
  position: absolute;
  width: 6px;
  height: 100%;
  background: var(--clr);
  transition: 0.5s ease-in-out;
}
.container .box:hover::before 
{
  width: 100%;
}  
.container .box .content 
{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.container .box .content .icon 
{
  position: relative;
  min-width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box .content .icon ion-icon 
{
  font-size: 2.5em;
  color: var(--clr);
  transition: 0.5s ease-in-out;
}

.container .box:hover .content .icon ion-icon  
{
  color: #fff;
}
.container .box .content .text h3
{
  font-weight: 500;
  color: var(--clr);
  transition: 0.5s ease-in-out;
}
.container .box .content .text p
{
  font-size: 0.9em;
  color: #999;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text h3,
.container .box:hover .content .text p 
{
  color: #fff;
}