質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1972閲覧

cssでアンダーラインにアニメーションをつけたい

icta

総合スコア7

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/11/17 22:50

<a>...</a>にホバーしたときアンダーラインに以下のサイトと同じアニメーションをつけたいです。
※サムネイル下の<a>SUBSCRIPTIONS</a>の箇所

https://kinfolk.com/shop/

最初に上記サイトの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 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「機能しなかった上記サイトのCSS」に下記を追加。

CSS

1p a:hover { 2 border:none; 3}

通常時はa要素のborderを表示し::after擬似要素のborderを非表示
hover時はa要素のborderを非表示にし::after擬似要素のbordertransitionかけて表示
ということです。

投稿2017/11/18 01:39

編集2017/11/18 01:45
Lhankor_Mhy

総合スコア35867

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

icta

2017/11/18 03:18

完璧な回答と丁寧なご説明、誠にありがとうございました。何時間かけてもできなかった問題が解決しスッキリしました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問