CSS样式，鼠标移入，底部线条两边延长效果

a{
    text-decoration: none;
}


.post-title-link {
    color: #3F51B5;
    position: relative;
    display: inline-block
}

.post-title-link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3F51B5;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.post-title-link:hover {
    text-decoration: none
}

.post-title-link:hover::after,
.post-title-link:active::after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}