質問編集履歴

3

追記しました。

2017/07/26 08:41

投稿

design_teratail
design_teratail

スコア14

test CHANGED
File without changes
test CHANGED
@@ -76,6 +76,22 @@
76
76
 
77
77
  }
78
78
 
79
+
80
+
81
+ /*追記*/
82
+
83
+ .test a {
84
+
85
+ color: #0054c2;
86
+
87
+ text-decoration: none !important;
88
+
89
+ border-bottom: 4px solid #0054c2;
90
+
91
+ padding: 0px 65px 5px 40px;
92
+
93
+ }
94
+
79
95
  ```
80
96
 
81
97
 

2

追記しました。

2017/07/26 08:41

投稿

design_teratail
design_teratail

スコア14

test CHANGED
File without changes
test CHANGED
@@ -93,3 +93,9 @@
93
93
  疑問などあったら遠慮なく。
94
94
 
95
95
  よろしくお願いします。
96
+
97
+
98
+
99
+ ###追記
100
+
101
+ a要素にマウスオーバーしたら、beforeにアニメーションがなるようにさせたいです。

1

コードを囲ったのと、コードを追記しました。失礼しました。

2017/07/26 08:10

投稿

design_teratail
design_teratail

スコア14

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  ###該当のHTML
18
18
 
19
+ ```ここに言語を入力
20
+
19
21
  <div id="text" class=sblue_text">
20
22
 
21
23
  <div class="test">
@@ -26,25 +28,55 @@
26
28
 
27
29
  </div>
28
30
 
31
+ ```
32
+
29
33
 
30
34
 
31
35
  ###該当のCSS
32
36
 
33
- .test::before {
37
+ ```ここに言語を入力
34
38
 
35
- -webkit-transition-property: right;
39
+ .test::before{
36
40
 
37
- transition-property: right;
41
+ content: "";
38
42
 
39
- -webkit-transition-duration: 0.3s;
43
+ position: absolute;
40
44
 
41
- transition-duration: 0.3s;
45
+ z-index: -1;
42
46
 
43
- -webkit-transition-timing-function: ease-out;
47
+ left: 0;
44
48
 
49
+ bottom: 0;
50
+
51
+ background: #2098D1;
52
+
53
+ height: 4px;
54
+
55
+ -webkit-transition-property: right;
56
+
57
+ transition-property: right;
58
+
59
+ -webkit-transition-duration: 0.3s;
60
+
61
+ transition-duration: 0.3s;
62
+
63
+ -webkit-transition-timing-function: ease-out;
64
+
45
- transition-timing-function: ease-out;
65
+ transition-timing-function: ease-out;
46
66
 
47
67
  }
68
+
69
+ .test a:hover {
70
+
71
+ border-bottom: 4px solid #0054c2;
72
+
73
+ line-height: 1.6em;
74
+
75
+ display: inline-block;
76
+
77
+ }
78
+
79
+ ```
48
80
 
49
81
 
50
82