::after擬似要素の位置指定について

htmlでアコーディオンを作成しております
クリックの文字の前と後ろ（後ろは文字の後ろではなく、横幅の右揃え）にしたいです

::afterで指定する際、

right: 0px;にしても
right: 100px;にしても
right: -100px;にしても変化しません

右位置はどのように指定すれば良いのでしょうか。

html
1<label class="acd-label" for="acd-check1">クリック</label>

css
1
2    .acd-label{
3      background: #333;
4      color: #fff;
5      display: block;
6      margin-bottom: 1px;
7      padding: 10px;
8    }
9    .acd-label::before {
10      color: white;
11      box-sizing: border-box;
12      height: 52px;
13      padding: 10px 20px;
14      right: 0;
15      top: 0px;
16      color: white;
17      content: "+";
18     }
19     .acd-label::after {
20      color: white;
21      box-sizing: border-box;
22      height: 52px;
23      right: 0px;
24      top: 0px;
25      color: white;
26      content: "+";
27     }
28

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

回答2件

right とかtop で位置指定するには、親要素(.acd-label)に position: relative; 疑似要素にposition: absolute;を設定する必要があります。他にもちょうどいい位置に配置するには余白調節が必要です。

クリックの文字の前と後ろ（後ろは文字の後ろではなく、横幅の右揃え）にしたいです

ということなら、position: absolute;で位置決めするより、Flexboxを使った方が簡単だし自由度も高いです。

コード例

css
1.acd-label{
2  background: #333;
3  color: #fff;
4  display: flex; /* */
5  margin-bottom: 1px;
6  padding: 10px;
7}
8.acd-label::before {
9  color: white;
10  box-sizing: border-box;
11  color: white;
12  content: "+";
13}
14.acd-label::after {
15  color: white;
16  box-sizing: border-box;
17  color: white;
18  content: "+";
19  margin-left: auto; /* 右寄せ */
20}