cssの擬似要素を用いてのアイコン作成について

下記のコードはcssの擬似要素を用いて「+」を表現している様なのですが、
::beforeと::afterで位置が違うのに、何故同じ位置で表示できているのでしょうか？
position: absolute;で位置を動かしているのは理解できます。
しかし、::beforeは指定した要素の直前で、::afterは指定した要素の直後なはずですが、cssの指定の仕方が、
.aa::after,
.aa::before {}
としているので、両方同時に同じ分だけの距離動かしている、と私は理解してしまいます。
その場合だと、どうしても.aa::afterの位置と.aa::beforeの位置がずれてしまうのではないか？と思います。
それなのに、何故同じ場所に表示できているのでしょうか？
css詳しい方おりましたら、解説をいただきたいです。
よろしくお願いいたします。
下記、プレビュー画像になります。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>テスト</title>
6    <link rel="stylesheet" type="text/css" href="main.css">
7  </head>
8  <body>
9    <div class="aaa">
10      <p class="aa">テスト</p>
11    </div>
12  </body>
13</html>

css
1.aaa {
2  position: relative;
3}
4
5.aa::after,
6.aa::before
7{
8  content: "";
9  position: absolute;
10  top: 0;
11  bottom: 0;
12  right: 15px;
13  margin: auto;
14  height: 2px;
15  width: 12px;
16  background-color: #000;
17  transition: all .1s ease-out;
18}
19
20.aa::after {
21  transform: rotate(90deg);
22}
23

kei344

2020/05/06 12:19 編集

「.accordion-trigger」のスタイルも無いと状況が再現できません。なるべく全体のコードを提示してください。

19941224ngng

2020/05/06 13:35

修正いたしました。よろしくお願いいたします。

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

回答2件

ベストアンサー

transform-originの初期値が50% 50% 0なので、要素中央を軸に回転している状態なので、位置指定が同じでも問題ありません。rotate()の値を少しずつ変化させてみてください、どのようになっているかがわかりやすいと思います。

【rotate() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/rotate

【transform-origin - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin

投稿2020/05/06 13:38

kei344

総合スコア69606

19941224ngng

2020/05/06 13:56 編集

ありがとうございます。 .aa::after { transform: rotate(90deg); } で水平だった線を縦に動かしたということはなんとか理解できました。しかし、::afterと::beforeで表示位置は異なるのではないかと思っています。が、もしかすると、 position: absolute; で絶対位置を指定すると、両方同じ位置に表示されると言うことなのでしょうか？