回答編集履歴
1
補足を追加
test
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
補足: 消すときにも下線をアニメーションしたいとのことなので。
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
- デフォルトでリンクの文字に付く下線を`text-decoration: none;`で削除しておく。
|
|
6
|
+
|
|
7
|
+
- **通常のリンクの表示に`position: relative;`を追加**。
|
|
8
|
+
|
|
3
|
-
- 通常のリンクの表示に`transition`は不要。
|
|
9
|
+
- 通常のリンクの表示に`transition`~~は不要~~を付ける→ホバーが外れたときの文字の表示用。
|
|
4
10
|
|
|
5
11
|
- ホバー時のリンクの表示に`transition`を追加。
|
|
6
12
|
|
|
7
|
-
- 通常のリンクの::after疑似要素には`transition`は不要。
|
|
13
|
+
- 通常のリンクの::after疑似要素には`transition`~~は不要~~を付ける→ホバーが外れたときの下線の表示用。
|
|
8
14
|
|
|
9
15
|
- 通常のリンクの::after疑似要素に`height`を指定して、下線(風に表示する矩形)の高さを設定する。
|
|
10
16
|
|
|
@@ -34,11 +40,13 @@
|
|
|
34
40
|
|
|
35
41
|
text-decoration: none;
|
|
36
42
|
|
|
43
|
+
position: relative;
|
|
44
|
+
|
|
45
|
+
transition: all 0.3s ease;
|
|
46
|
+
|
|
37
47
|
}
|
|
38
48
|
|
|
39
49
|
|
|
40
|
-
|
|
41
|
-
/* ここから下線追加 */
|
|
42
50
|
|
|
43
51
|
.navbar .menu li a:hover {
|
|
44
52
|
|
|
@@ -68,6 +76,8 @@
|
|
|
68
76
|
|
|
69
77
|
height: 1px;
|
|
70
78
|
|
|
79
|
+
transition: all 0.3s ease;
|
|
80
|
+
|
|
71
81
|
}
|
|
72
82
|
|
|
73
83
|
|