<a>...</a>にホバーしたときアンダーラインに以下のサイトと同じアニメーションをつけたいです。
※サムネイル下の<a>SUBSCRIPTIONS</a>の箇所
最初に上記サイトのCSSを試しましたが機能しないため、見栄えが同じようになるよう別の方法で試してみましたが、あと少しのところでうまくいきません。
解決方法を教えていただけれませんでしょうか。
よろしくお願いします。
見栄えが同じようになるよう試した方法
<html> <head> <style> a { position: relative; display: inline-block; padding: .4em; text-decoration: none; border-bottom:1px solid red; -webkit-transition: ease-out .35s; transition: ease-out .35s; } a:hover { position: relative; border-bottom:1px solid transparent; } a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: red; } a:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: ease-out .35s; transition: ease-out .35s; } </style> </head> <body> <p>これは<a href="#">テスト</a>です</p> </body> </html>
機能しなかった上記サイトのCSS
a { color:#1A1A1A } p a { text-decoration:none; display:inline-block; position:relative; border-bottom:1px solid #D17D74 } p a:hover:after { width:100%; } p a:after { content:""; position:absolute; bottom:-1px; left:0; right:0; margin:0 auto; width:0; border-bottom:1px solid #D17D74; -webkit-transition:width ease-out 350ms; transition:width ease-out 350ms; -webkit-transition-delay:50ms; transition-delay:50ms }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/18 03:18