jQueryのアコーディオンで、アコーディオンを開いたときに疑似要素の画像だけ少し遅れて表示されてしまう

Q 初心者だけど大丈夫でしょうか？

A はい。大丈夫です。ほとんどの方が〇時間のレッスンで~

という内容のものをjQueryのアコーディオンを使って、『Q 初心者だけど大丈夫でしょうか？』という部分をクリックしたら、『A はい。大丈夫です。ほとんどの方が〇時間のレッスンで~』という非表示になっていた部分が降りてきて表示される仕様に作成したのですが、このクリックしたら表示される部分が、A←この部分だけ少し遅れて表示されてしまいます。

このAの部分はCSSの疑似要素で表示していて、画像になっているのでbackgroundを使って表示しているものです。

この部分だけ少し遅れてパッと表示されるのが不自然なので、解消したいのですが、どのようにすれば解消可能になるかご教示頂きたいです。HTML,CSS,JavaScript(jQuery)のコードは以下のようになります。

HTML
1   <dl class="ac">
2        <dt class="ac-parent">初心者だけど大丈夫でしょうか？</dt>
3        <dd class="ac-child">はい。大丈夫です。ほとんどの方が〇時間のレッスンで~</dd>
4   </dl>

CSS
1/* アコーディオンメニュー全体のサイズ・位置 */
2.ac {
3  max-width: 845px;
4  margin: 0 auto;
5  padding: 0 18px;
6  -webkit-box-sizing: content-box;
7  box-sizing: content-box;
8}
9
10.ac-parent {
11  position: relative;
12  /* 追加 */
13  font-size: 2rem;
14  padding-top: 34px;
15  padding-bottom: 26.5px;
16  border-bottom: 1px solid #707070;
17  background-color: #fff;
18  color: #060606;
19  line-height: 1;
20  cursor: pointer;
21  padding-left: 20px;
22}
23
24.ac-parent:first-of-type {
25  border-top: 1px solid #707070;
26}
27
28.ac-parent::before {
29  position: absolute;
30  left: -90px;
31  top: 0;
32  content: "";
33  background: url(../img/illust/faq_q.png) no-repeat center;
34  background-size: cover;
35  width: 73px;
36  height: 73px;
37}
38
39/* 擬似要素で下三角形を作成 */
40.ac-parent:after {
41  content: "";
42  display: inline-block;
43  position: absolute;
44  top: 45%;
45  right: 30px;
46  width: 22px;
47  height: 22px;
48  border-right: 3px solid #707070;
49  border-bottom: 3px solid #707070;
50  -webkit-transform: translateY(-50%) rotate(45deg);
51  transform: translateY(-50%) rotate(45deg);
52  -webkit-transition: 0.3s;
53  transition: 0.3s;
54}
55
56/* クリックしたら表示される領域 */
57.ac-child {
58  display: none;
59  padding: 2em 1em;
60  background-color: #fff;
61  color: #2fb2cf;
62  font-size: 2rem;
63  position: relative;
64  line-height: 1.8;
65}
66
67.ac-child::before {
68  content: "";
69  position: absolute;
70  top: 50%;
71  -webkit-transform: translateY(-50%);
72  transform: translateY(-50%);
73  left: -90px;
74  content: "";
75  background: url(../img/illust/faq_a.png) no-repeat center;
76  background-size: cover;
77  width: 73px;
78  height: 73px;
79}
80
81/* オープン時にopenクラスを付与 */
82.ac-parent.open:after {
83  -webkit-transform: rotate(225deg);
84  transform: rotate(225deg);
85  border-right: 3px solid #08e2d3;
86  border-bottom: 3px solid #08e2d3;
87}

JaavaScript
1//アコーディオン
2jQuery(function () {
3  jQuery('.ac-parent').on('click', function () {
4    jQuery(this).next().slideToggle();
5    //openクラスをつける
6    jQuery(this).toggleClass("open");
7    //クリックされていないac-parentのopenクラスを取る
8    jQuery('.ac-parent').not(this).removeClass('open');
9
10    // 一つ開くと他は閉じるように
11    jQuery('.ac-parent').not($(this)).next('.ac-child').slideUp();
12  });
13});

追記：　※.ac-child::before(Qの部分)をleft: -90px;とマイナスにするのではなく、0にすると後から遅れて表示されなくなることに気付きましたが、やはりそのままでは位置がおかしくなってしまいます。

HTMLの構造はなるべくそのままで、CSSの指定やJavaScript(jQuery)の記述の変更で遅れて表示されないようにしたいのですが、お分かりになる方いらっしゃいましたらご回答をお願いいたします。

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

回答2件

position: absolute; で位置決めしているが原因のようです。
position: absolute;とslideToggle()は相性が悪いです。

position: absolute;以外の方法でレイアウトを決めるようにするといいでしょう。

例えば、float: left; を使うとか。

css
1.ac-child::before {
2  content: "";
3  display: block;
4  content: "";
5  background: url(../img/illust/faq_a.png) no-repeat center;
6  background-size: cover;
7  width: 73px;
8  height: 73px;
9  float: left;
10  margin: 10px 40px 10px 0;
11}