css 超链接底部加横线效果

Posted 2021-05-13

.table a {position: relative}
.table a:before {content: "";position: absolute;width: 100%;height: 1px;bottom: 0;left: 0;background-color: #4485c5;visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);transition: all .3s ease-in-out 0s;top: 1.2em}
.table a:hover:before {visibility: visible;-webkit-transform: scaleX(1);transform: scaleX(1)}