效果图:
<a href="#"> <span>HTML</span> </a>
a { position: relative; text-decoration: none; display: block; text-align: center; width: 200px; } /* 绘制上下线条 */ a::before, a::after{ content: ""; position: absolute; width: 100%; height: 2px; transition: width .2s ease-in-out; background: #92B901; } /* 固定线条方向 */ a::before{ top: 0; left: 0; } a::after{ bottom: 0; right: 0; } /* 过滤效果 */ a:hover::before, a:hover::after{ width: 0; } a span{ display: block; padding: 20px; } /* 绘制左右线条 */ a span::before, a span::after{ content: ""; position: absolute; width: 2px; height: 100%; transition: height .2s ease; background: #92B901; } a span::before{ bottom: 0; left: 0; } a span::after{ top: 0; right: 0; } a span:hover::before, a span:hover::after{ height: 0; }