這是我從前端客上看到的一個特效，也就是使用scaleX()實現(xiàn)從中間延展的下劃線，縮放是從元素的中間開始的。這是我從沒有想到的，X軸縮放！

在這個例子中還使用到了hover對兄弟元素的操控哦。

下面讓我們一起來看看這是如何實現(xiàn)的吧。

Document

div{

margin: 0 auto;

}

.a{

width: 100px;

height: 30px;

background: red;

}

.b{

width: 2px;

height: 2px;

background: blue;

margin-top: 30px;

visibility: hidden;

transition: 2s;

}

.a:hover + .b{

visibility: visible;

transform: scaleX(50);

}

本文由【waitig】發(fā)表在等英博客 本文固定鏈接：純CSS實現(xiàn)從中間延展的下劃線 歡迎關注本站官方公眾號，每日都有干貨分享！

點贊 (0)賞分享 (0)

總結

以上是生活随笔為你收集整理的html下划线输入框自动延伸,纯CSS实现从中间延展的下划线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。