アコーディオンメニューのクリックするアイコンの大きさが可変しません。

html
1	<section class="cp_actab">
2			<input id="one" type="checkbox" name="tabs" checked>
3			<label for="one"><div class="qa_list"><img src="img/q1.png"></div></label>
4			<div class="cp_actab-content"><div class="qa_list"><img src="img/a1.png"></div>
5		</div>
6</section>

css
1.cp_actab {
2    position: relative;
3    overflow: hidden;
4    width: 95%;
5    margin: 0 auto;
6  }
7
8  .cp_actab input {
9    position: absolute;
10    z-index: -1;
11    opacity: 0;
12  }
13
14  .cp_actab label {
15    position: relative;
16    display: block;
17    padding: 0 0 0 5vw;
18    cursor: pointer;
19    margin: 0 0 1vw 0;
20    background: #f5878b;
21    text-align: left;
22  }
23
24  .qa_list img {
25    width: 100%;
26  }
27
28  .cp_actab .cp_actab-content {
29    max-height: 0;
30    -webkit-transition: max-height 0.35s;
31    transition: max-height 0.35s;
32    color: #f5878b;
33    background: none;
34    padding-right: 1vw;
35  }
36
37  /* :checked */
38  .cp_actab input:checked~.cp_actab-content {
39    max-height: 100rem;
40  }
41
42  /* Icon */
43  .cp_actab label::after {
44    line-height: 3;
45    position: absolute;
46    top: 10vw;
47    right: 0;
48    display: block;
49    float: left;
50    width: 100%;
51    -webkit-transition: all 0.5s;
52    transition: all 0.5s;
53    text-align: center;
54  }
55
56  .cp_actab input[type=checkbox]+label::after {
57    content: url("../img/check_icon.png");
58  }
59
60  .cp_actab input[type=checkbox]:checked+label::after {
61    transform: rotate(0.5turn);
62  }
63
64  .qa {
65    background-color: #f5878b;
66    background-size: 100%;
67    height: 100%;
68    width: 40%;
69    margin: 0 auto;
70    padding: 0 0 1rem 0;
71  }

上記コードでアコーディオンメニューを作成していて、クリックするアイコン部分を画像（png）で作成しました。
配置などはcssで設定できたのですがなぜかアイコン（画像）の大きさが変わりません。

解決したいこと

アコーディオンのクリックアイコンの大きさの変更、レスポンシブ対応（width:100%;ならその比率で変化）

試したこと

css
1
2
3  /* Icon */
4  .cp_actab label::after {
5    line-height: 3;
6    position: absolute;
7    top: 10vw;
8    right: 0;
9    display: block;
10    float: left;
11    width: 100%;
12    -webkit-transition: all 0.5s;
13    transition: all 0.5s;
14    text-align: center;
15  }

のように
display:block;
float:left;
width:100%;
を追加してインライン要素をブロックにしても大きさは変わらずでした。
marginは効きました。

詳しい方原因をご教示頂けますと幸いです。

Lhankor_Mhy

2020/06/23 08:13

check_icon.png のことですか？

bakio

2020/06/23 08:14

Lhankor_Mhy様はい、そうです。該当の画像はそちらになります。

行動規範の内容に同意します

回答2件

css
1  .cp_actab input[type=checkbox]+label::after {
2    content: '';
3    /*何も入れない*/
4    display: block;
5    /*忘れずに！*/
6    background-size: 100%;
7    width: 16%;  /*好みの数値を*/
8    height: 21%;  /*好みの数値を*/
9    background-image: url("../img/check_icon.png");
10    background-repeat: no-repeat;
11    left: 16vw;
12  }

Lhankor_Mhy様にご指摘いただきました箇所とcontentプロパティをbackgroundに変更しました。
内容は上記の通りです。
こちらでアイコンのレスポンシブ対応できるようになりました。

お時間いただき回答くださり感謝いたします。

投稿2020/06/23 09:17

bakio

総合スコア21

Lhankor_Mhy

2020/06/23 09:23

ご解決されて何よりです。自己解決にされてはいかがですか？

行動規範の内容に同意します

ベストアンサー

このような感じではいかがでしょうか。

css
1  .cp_actab input[type=checkbox]+label::after {
2    content: url("../img/check_icon.png");
3    display: flex;
4    width: 10%; /* 適当に調整する */
5  }