hover時に要素が揺れるアニメーションをcssで実装したい

前提・実現したいこと

div要素をhoverしたときに、揺れるアニメーションをつけたいです。
下記のようなコードで実装しましたが、デザインとしてつけた:afterの擬似要素が、hover時に何故かdiv.boxのborderより前、テキストより後ろに表示されます。
hoverする前のデザインのまま揺れるようにしたいです。

該当のソースコード

html
1<div class="box"><p>テキスト</p></div>

css
1.box {
2  width: 500px;
3  position: relative;
4  color:  rgb(110, 110, 110);
5  font-size: 2em;
6  margin: 5%;
7  text-align: center;
8  border: 1px solid rgb(110, 110, 110);
9  padding: 3%;
10}
11
12.box:after {
13  position: absolute;
14  top: 8px;
15  left: 8px;
16  background-color: #fbf4bf;
17  width: 100%;
18  height: 100%;
19  content: '';
20  z-index: -5;
21}
22
23.box:hover {
24  animation: rotate 0.7s ease-in-out both;
25}
26
27@keyframes rotate {
28  0% {
29    transform: rotate(0deg);
30  }
31  25% {
32    transform: rotate(6deg);
33  }
34  50% {
35    transform: rotate(-6deg);
36  }
37  75% {
38    transform: rotate(3deg);
39  }
40  100% {
41    transform: rotate(-1deg);
42  }
43}

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

回答1件

ベストアンサー

サンプルを作成して確認してみましたが、確かにそうなりますね。

ボーダーも疑似要素にしたらどうでしょう。
.box のborderは削除して下記の疑似要素を追加してみたらうまくいきました。

css
1.box::before {
2  position: absolute;
3  top: 0;
4  left: 0;
5  background-color: transparent;
6  width: 100%;
7  height: 100%;
8  content: '';
9  border: 1px solid rgb(110, 110, 110);
10  display: block;
11  z-index: -1;
12}