回答編集履歴
3
説明の改善
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
反応する高さを広げるには、span要素に適切な高さと幅を設定します。ただし、spanはインライン要素なので中身がないと高さも幅も0になりますので、`display: inline-block;`でインラインブロック要素に変換します。
|
|
28
28
|
|
|
29
|
-
::before疑似要素の幅は100%にします。
|
|
29
|
+
::before疑似要素の幅は100%にします。::after疑似要素は right で右端に配置します。
|
|
30
30
|
|
|
31
31
|
これで、:hover に幅を設定すれば矢印が伸びます。
|
|
32
32
|
|
2
コードにコメント追加
test
CHANGED
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
|
|
43
43
|
opacity:0.3;
|
|
44
44
|
|
|
45
|
-
display: inline-block;
|
|
45
|
+
display: inline-block; /*追加*/
|
|
46
46
|
|
|
47
|
-
width: 50px;
|
|
47
|
+
width: 50px; /*追加*/
|
|
48
48
|
|
|
49
|
-
height: 20px;
|
|
49
|
+
height: 20px; /*追加*/
|
|
50
50
|
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
left: 0px;
|
|
64
64
|
|
|
65
|
-
width: 100%;
|
|
65
|
+
width: 100%; /*修正*/
|
|
66
66
|
|
|
67
67
|
height: 2px;
|
|
68
68
|
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
|
|
81
81
|
top: 0;
|
|
82
82
|
|
|
83
|
-
right: 1px;
|
|
83
|
+
right: 1px; /*修正*/
|
|
84
84
|
|
|
85
85
|
width: 15px;
|
|
86
86
|
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
|
|
101
101
|
opacity:1;
|
|
102
102
|
|
|
103
|
-
width: 200px;
|
|
103
|
+
width: 200px; /*追加*/
|
|
104
104
|
|
|
105
105
|
}
|
|
106
106
|
|
1
サンプルリンク追加
test
CHANGED
|
@@ -105,3 +105,7 @@
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
```
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/gOryZVB)
|