回答編集履歴
1
補足を追加
answer
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
補足: 消すときにも下線をアニメーションしたいとのことなので。
|
|
2
|
+
|
|
1
|
-
- デフォルトでリンクの文字に付く下線を`text-decoration: none
|
|
3
|
+
- デフォルトでリンクの文字に付く下線を`text-decoration: none;`で削除しておく。
|
|
4
|
+
- **通常のリンクの表示に`position: relative;`を追加**。
|
|
2
|
-
- 通常のリンクの表示に`transition`は不要。
|
|
5
|
+
- 通常のリンクの表示に`transition`~~は不要~~を付ける→ホバーが外れたときの文字の表示用。
|
|
3
6
|
- ホバー時のリンクの表示に`transition`を追加。
|
|
4
|
-
- 通常のリンクの::after疑似要素には`transition`は不要。
|
|
7
|
+
- 通常のリンクの::after疑似要素には`transition`~~は不要~~を付ける→ホバーが外れたときの下線の表示用。
|
|
5
8
|
- 通常のリンクの::after疑似要素に`height`を指定して、下線(風に表示する矩形)の高さを設定する。
|
|
6
9
|
- ホバー時のリンクの::after疑似要素に`transition`を追加。
|
|
7
10
|
|
|
@@ -16,9 +19,10 @@
|
|
|
16
19
|
font-size: 18px;
|
|
17
20
|
margin-left: 25px;
|
|
18
21
|
text-decoration: none;
|
|
22
|
+
position: relative;
|
|
23
|
+
transition: all 0.3s ease;
|
|
19
24
|
}
|
|
20
25
|
|
|
21
|
-
/* ここから下線追加 */
|
|
22
26
|
.navbar .menu li a:hover {
|
|
23
27
|
color: crimson;
|
|
24
28
|
position: relative;
|
|
@@ -33,6 +37,7 @@
|
|
|
33
37
|
background: crimson;
|
|
34
38
|
width: 0;
|
|
35
39
|
height: 1px;
|
|
40
|
+
transition: all 0.3s ease;
|
|
36
41
|
}
|
|
37
42
|
|
|
38
43
|
.navbar .menu li a:hover::after {
|