如何在分割边界上使用css或jquery进行鼠标悬停动画效果

.heading-text{
    font-family: verdana;
    font-size:12px;
    color:#124253;
    min-width:50px;
    height:32px;
    margin-top:8px;
    text-align: center;
    cursor: pointer;
}
.heading-text:hover{
    border-bottom-style:solid;
    border-bottom-color:#012b61;
    border-bottom-width:3px;
}
.heading-text{
    font-family: verdana;
    fo