リンクには既定値で、最初からアンダーラインが表示されるようになっています、逆にマウスオーバーすることで表示させるっていう使い方も結構されます。今回のコードは、text-decorationを使ったものではなく 擬似要素を使って線を表現しています、そのことによってより柔軟な表現が可能になります コードの解説と実装方法 アンダーラインの部分は a の擬似要素 after を使って作られています。 それを transition で変化させています 変化する基準は scaleです。 scaleは拡大縮小を行うことが出来ます このコードでは、X軸に対して拡大縮小します。つまり横方向のみに伸びたり縮んだりして見えるようになります これをマウスオーバーすることで動作するようにしています。 コード SCSS版 a { position: relative; display: inline-block; p
![scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード | 9ineBB](https://cdn-ak-scissors.b.st-hatena.com/image/square/45d469ece0db9b3d4dfc3e24025abcfe61c9026f/height=288;version=1;width=512/https%3A%2F%2F9-bb.com%2Fwp-content%2Fuploads%2F2014%2F06%2FWS003115.png)