实现效果

图片描述

具体实现

利用css3 ::after或者::before伪元素实现。

html代码

      webpack无法通过 IP 地址访问 localhost 解决方案

css代码

.abstract-title {    line-height: 2.5rem;    color: #787878;    padding-bottom: 0.5rem;    position: relative;}.abstract-title span::before {    content: "";    position: absolute;    width: 100%;    height: 2px;    bottom: 0;    left: 0;    background-color: #aaa;    visibility: hidden;    -webkit-transform: scaleX(0);    -moz-transform: scaleX(0);    -ms-transform: scaleX(0);    -o-transform: scaleX(0);    transform: scaleX(0);    transition-duration: .2s;    transition-timing-function: ease-in-out;    transition-delay: 0s;}.abstract-title span:hover::before {    visibility: visible;    -webkit-transform: scaleX(1);    -moz-transform: scaleX(1);    -ms-transform: scaleX(1);    -o-transform: scaleX(1);    transform: scaleX(1)}

转载地址：http://gccix.baihongyu.com/

你可能感兴趣的文章

Python WOL/WakeOnLan/网络唤醒数据包发送工具