質問編集履歴

1

css追加しました

2021/08/26 11:49

投稿

kogari
kogari

スコア12

test CHANGED
File without changes
test CHANGED
@@ -76,4 +76,106 @@
76
76
 
77
77
 
78
78
 
79
+ ```scss
80
+
81
+ .contact-form-radio {
82
+
83
+ label {
84
+
85
+ display: block;
86
+
87
+ @include fz(16,14);
88
+
89
+ &:not(:first-child) {
90
+
91
+ margin-top: 20px;
92
+
93
+ }
94
+
95
+ }
96
+
97
+ margin-top: 21px;
98
+
99
+ [type="radio"] {
100
+
101
+ display: none;
102
+
103
+ }
104
+
105
+
106
+
107
+ span {
108
+
109
+ padding-left: 26px;
110
+
111
+ position: relative;
112
+
113
+
114
+
115
+ &::before {
116
+
117
+ content:'';
118
+
119
+ width: 20px;
120
+
121
+ height:20px;
122
+
123
+ border:1px solid #707070;
124
+
125
+ position:absolute;
126
+
127
+ left:0;
128
+
129
+ top:50%;
130
+
131
+ transform:translateY(-50%);
132
+
133
+ border-radius: 50%;
134
+
135
+ }
136
+
137
+ &::after {
138
+
139
+ content:'';
140
+
141
+ width: 10px;
142
+
143
+ height:10px;
144
+
145
+ background:$main_blue;
146
+
147
+ position:absolute;
148
+
149
+ left:5px;
150
+
151
+ top:50%;
152
+
153
+ transform:translateY(-50%);
154
+
155
+ border-radius: 50%;
156
+
157
+ display: none;
158
+
159
+ }
160
+
161
+ }
162
+
163
+ [type="radio"]:checked + span {
164
+
165
+ &::after {
166
+
167
+ display: block;
168
+
169
+ }
170
+
171
+ }
172
+
173
+ }
174
+
175
+ ```
176
+
177
+
178
+
179
+
180
+
79
181
  検証ツール見てもどこがどの擬似要素なのかが全くわからなくてつまずいてしまったのでご教授いただけると嬉しいです