アコーディオンで右端に文字とボタンを置きたい

アコーディオンでに関して質問です。
左側に文字、右側に文字＋ボタンを置きたいのですが、どのように書けばよろしいでしょうか？

HTML
1<div class="cp_actab">
2    <input id="tab-one" type="checkbox" name="tabs">
3    <label for="tab-one">テキスト</label>
4    <div class="cp_actab-content">
5      <p>テキスト</p>
6    </div>
7</div>
8

CSS
1.cp_actab {
2  position: relative;
3  overflow: hidden;
4  width: 100%;
5  margin: 0 auto;
6  color: #000;
7}
8
9.cp_actab input {
10  position: absolute;
11  z-index: -1;
12  opacity: 0;
13}
14
15.cp_actab label {
16  font-weight: bold;
17  line-height: 3;
18  position: relative;
19  display: block;
20  padding: 0 0 0 1em;
21  cursor: pointer;
22  margin: 0 0 1px 0;
23  background: #e7f4ef;
24}
25
26.cp_actab .cp_actab-content {
27  overflow: hidden;
28  max-height: 0;
29  -webkit-transition: max-height 0.35s;
30  transition: max-height 0.35s;
31  color: #333333;
32  background: #f1c6c6;
33}
34
35.cp_actab .cp_actab-content p {
36  margin: 1em;
37}
38
39/* :checked */
40.cp_actab input:checked ~ .cp_actab-content {
41  max-height: 20em;
42}
43
44/* Icon */
45
46.cp_actab label::after {
47  line-height: 3;
48  position: absolute;
49  top: 0;
50  right: 0;
51  display: block;
52  width: 3em;
53  height: 3em;
54  -webkit-transition: all 0.35s;
55  transition: all 0.35s;
56  text-align: center;
57}
58
59.cp_actab input[type="checkbox"] + label::after {
60  content: "詳細 +";
61}
62
63.cp_actab input[type="checkbox"]:checked + label::after {
64  transform: rotate(135deg);
65}

左側にテキスト、右側に「詳細」とボタンをおいています。
cotentの中に「詳細」とボタンの要素を両方入れてしまうと、ボタンと一緒に回転してしまうため、ボタンだけ回転するようにしたいのですが、どのようにすれば良いかどうぞご教示お願いします。

m.ts10806

2020/07/24 02:08

「良いコードの書き方」というのは実現は出来ている前提ということでしょうか。もう少し具体的に方向性を提示してください。（でないと「問題・課題がない質問」になります）

Wbegginer

2020/07/24 02:31

質問の仕方が悪くてすいません。実現はできていませんので、実現するにはどのようにすれば良いかご教示頂ければ幸いです。

m.ts10806

2020/07/24 02:32

質問本文調整してください。

Lhankor_Mhy

2020/07/25 03:32

『右側に「詳細」とボタンをおいています』とのことですが、「詳細」は確認できたのですが、ボタンとはどれのことですか？

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

回答1件

ベストアンサー

まぁ何となくこういうことだろうなと予想しての回答です。

訂正前

css
1.cp_actab input[type="checkbox"] + label::after {
2  content: "詳細 +";
3}

訂正後

css
1        .cp_actab input[type="checkbox"]+label::after {
2            content: "+";
3        }
4
5        .cp_actab input[type="checkbox"]+label::before {
6            content: "詳細";
7            display: block;
8            position: absolute;
9            top: 1px;
10            right: 40px
11        }