ボーダーの太さがウィンドウ幅によって変わってしまう

前提・実現したいこと

「READ MORE」の下に::afterでボーダーを付けたんですけど、幅などによって太さが変わる現象が起きてしまいます。画像にあるボーダーは:hover解除して戻る瞬間に一瞬ボーダーが太くなります。これはどうしようもないのでしょうか。

該当のソースコード

HTML
1    <!-- ====== header ====== -->
2    <header>
3      <div class="container">
4      <h1 class="header-logo"><a href="#">Travel Blog</a></h1>
5    </div><!-- /container -->
6    <nav id="header-nav">
7      <div class="container">
8        <ul>
9          <li><a href="#">NEW</a></li>
10          <li><a href="#">COLUMN</a></li>
11          <li><a href="#">SERIES</a></li>
12          <li><a href="#">Q&A</a></li>
13          <li><a href="#">CONTACT</a></li>
14        </ul>
15      </div>
16    </nav>
17    </header>
18
19    <!-- ====== main ====== -->
20    <main>
21     <div class="container">
22      <div class="top-image">
23        <figure>
24          <img src="../images/pickup1.jpg">
25          <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption>
26          <div class="top-text">
27          <p><a href="#">READ MORE</a></p>
28        </div><!-- /top-text -->
29        </figure>
30        <figure>
31          <img src="../images/pickup2.jpg">
32          <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption>
33          <div class="top-text">
34          <p><a href="#">READ MORE</a></p>
35        </div><!-- /top-text -->
36        </figure>
37        <figure>
38          <img src="../images/pickup3.jpg">
39          <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption>
40          <div class="top-text">
41          <p><a href="#">READ MORE</a></p>
42        </div><!-- /top-text -->
43        </figure>
44      </div><!-- /top-image -->
45
46      <div class="column">
47        <div class="main-image">
48        <figure>
49          <figcaption>タイトルテキストテキストテキストテキストテキスト</figcaption>
50          <p class="category year"><a href="#">2020/01/01</a></p><p class="category"><a href="#">カテゴリ1</a></p>
51          <img src="../images/main1.jpg">
52          <div class="main-image-letter">
53          <p class="main-image-text">本文テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>         
54            <p class="main-link"><a href="#">READ MORE</a></p>
55          </div><!-- /main-image-letter -->
56        </figure>
57        <figure>
58          <figcaption>タイトルテキストテキストテキストテキストテキスト</figcaption>
59          <p class="category year"><a href="#">2020/01/01</a></p><p class="category"><a href="#">カテゴリ1</a></p>
60          <img src="../images/main2.jpg">
61          <div class="main-image-letter">
62          <p class="main-image-text">本文テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
63            <p class="main-link"><a href="#">READ MORE</a></p>
64          </div><!-- /main-image-letter -->
65        </figure>
66        <figure>
67          <figcaption>タイトルテキストテキストテキストテキストテキスト</figcaption>
68          <p class="category year"><a href="#">2020/01/01</a></p><p class="category"><a href="#">カテゴリ1</a></p>
69          <img src="../images/main3.jpg">
70          <div class="main-image-letter">
71          <p class="main-image-text">本文テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
72            <p class="main-link"><a href="#">READ MORE</a></p>
73          </div><!-- /main-image-letter -->
74        </figure>
75      </div><!-- /main-image -->
76
77      <div class="side-column">
78        <div class="introduction">
79          <div class="heading">
80          <img src="../images/author.jpg" class="introduction-image">
81          <h4>Name Name</h4>
82        </div><!-- /heading-->
83          <p>プロフィールテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
84        </div><!-- /introduction -->
85
86        <div class="ranking">
87          <div class="heading">
88          <h4>Ranking</h4>
89        </div><!-- /heading -->
90          <figure>
91            <img src="../images/ranking1.jpg">
92            <p>タイトルテキストテキストテキストテキストテキストテキスト</p>
93          </figure>
94          <figure>
95            <img src="../images/ranking2.jpg">
96            <p>タイトルテキストテキストテキストテキストテキストテキスト</p>
97          </figure>  
98          <figure>
99            <img src="../images/ranking3.jpg">
100            <p>タイトルテキストテキストテキストテキストテキストテキスト</p>
101          </figure>
102        </div><!-- /ranking -->
103
104        <div class="archive">
105          <div class="heading">
106            <h4>Archive</h4>
107          </div><!-- /heading -->
108          <p><a href="#">XXXX年XX月(XX)</a></p>
109          <p><a href="#">XXXX年XX月(XX)</a></p>
110          <p><a href="#">XXXX年XX月(XX)</a></p>
111          <p><a href="#">XXXX年XX月(XX)</a></p>
112          <p><a href="#">XXXX年XX月(XX)</a></p>
113          <p><a href="#">XXXX年XX月(XX)</a></p>
114          <p><a href="#">XXXX年XX月(XX)</a></p>
115          <p><a href="#">XXXX年XX月(XX)</a></p>
116          <p><a href="#">XXXX年XX月(XX)</a></p>
117          <p><a href="#">XXXX年XX月(XX)</a></p>
118          <p><a href="#">XXXX年XX月(XX)</a></p>
119          <p><a href="#">XXXX年XX月(XX)</a></p>
120          <p><a href="#">XXXX年XX月(XX)</a></p>
121          <p><a href="#">XXXX年XX月(XX)</a></p>
122          <p><a href="#">XXXX年XX月(XX)</a></p>
123        </div><!-- /archive -->
124      </div><!-- /side-column -->
125      </div><!-- /column -->
126     </div><!-- /container -->
127    </main>
128
129    
130  </body>
131</html>

CSS
1@charset "utf-8";
2
3/* ====== 共通 ====== */
4html,body {
5  font-size: 16px;
6}
7
8body,div,p,h1,h2,h3,h4,h5,h6,ul,li,a,figure {
9  margin: 0;
10  padding: 0;
11  color: rgb(51, 51, 51);
12  font-family: 'Noto Sans JP', sans-serif;
13}
14
15p,td,th,li {
16  line-height: 1.8;
17}
18
19a {
20  text-decoration: none;
21}
22
23li {
24  list-style: none;
25}
26
27.container {
28  max-width: 1180px;
29  margin: 0 auto;
30}
31
32/* ====== header ====== */
33header {
34  position: fixed;
35  top: 0;
36  z-index: 99;
37  width: 100%;
38  background: white;
39}
40
41.header-logo {
42  line-height: 2.3;
43}
44
45.header-logo a {
46  font-size: 27px;
47  font-weight: normal;
48}
49
50#header-nav {
51  background: rgb(51, 51, 51);
52  width: 100%;
53  padding: 5px 0;
54}
55
56#header-nav li {
57  display: inline-block;
58  padding-right: 55px;
59}
60
61#header-nav a {
62  color: white;
63  font-size: 14px;
64}
65
66@media(max-width: 768px) {
67  #header-nav {
68    overflow-x: auto;
69    white-space: nowrap;
70  }
71
72  #header-nav li {
73    width: 20%;
74    text-align: center;
75    padding: 0 15px;
76  }
77}
78
79/* ====== main ====== */
80/* top-image */
81.top-image {
82  display: flex;
83  justify-content: space-between;
84  padding: 150px 0 35px 0;
85}
86
87.top-image figure {
88  width: 31%;
89}
90
91.top-image figcaption {
92  font-weight: bold;
93  padding-top: 10px;
94  font-size: 14px;
95  line-height: 1.7;
96  letter-spacing: 1px;
97}
98
99.top-image img {
100  width: 100%;
101}
102
103.top-text {
104  text-align: center;
105  padding-top: 20px;
106}
107
108.top-text p {
109  display: inline-block;
110  font-size: 13px;
111  line-height: 1;
112}
113
114.top-text a {
115  position: relative;
116  display: inline-block;
117  line-height: 2;
118}
119
120.top-text a::after {
121  position: absolute;
122  opacity: 1;
123  transition: .2s;
124  content: '';
125  width: 100%;
126  height: 1px;
127  left: 0;
128  bottom: 1px;
129  background: #333;
130}
131
132.top-text a:hover::after {
133  opacity: 0;
134  bottom: -2px;
135}
136
137@media(max-width: 768px) {
138  .top-image {
139    flex-flow: column;
140  }
141
142  .top-image figure {
143    width: 100%;
144    box-sizing: border-box;
145    padding: 0 10px 40px;
146  }
147}
148
149/* column */
150.column {
151  display: flex;
152  padding-top: 30px;
153  padding-bottom: 150px;
154}
155
156:is(.main-image, .ranking) img {
157  width: 100%;
158}
159
160/* main-image */
161.main-image {
162  width: 66%;
163  padding-right: 20px;
164}
165
166.main-image, .side-column {
167  box-sizing: border-box;
168}
169
170.main-image figure {
171  padding-bottom: 80px;
172}
173
174.main-image figcaption {
175  font-size: 22px;
176  font-weight: bold;
177  letter-spacing: 2px;
178  padding-bottom: 20px;
179}
180
181.main-image .category {
182  display: inline-block;
183  font-size: 13px;
184}
185
186.main-image .year {
187  padding-right: 20px;
188}
189
190.main-image .main-image-letter {
191  text-align: center;
192}
193
194.main-image .main-image-text {
195  font-size: 14px;
196  width: 90%;
197  display: inline-block;
198  text-align: left;
199  padding-top: 20px;
200}
201
202.main-image .main-link {
203  display: inline-block;
204  font-size: 14px;
205  padding-top: 20px;
206  line-height: 1;
207}
208
209.main-link a {
210  position: relative;
211  display: inline-block;
212  line-height: 2;
213}
214
215.main-link a::after {
216  position: absolute;
217  width: 100%;
218  height: 1px;
219  left: 0;
220  bottom: 2px;
221  opacity: 1;
222  background: #333;
223  content: '';
224  transition: .3s;
225}
226
227.main-link a:hover::after {
228  opacity: 0;
229  bottom: -2px;
230}
231
232/* side-column */
233.side-column {
234  width: 34%;
235  padding-left: 25px;
236  padding-right: 20px;
237}
238
239/* introduction */
240.introduction-image {
241  border-radius: 50%;
242  width: 120px;
243  height: 120px;
244}
245
246.heading {
247  text-align: center;
248}
249
250.introduction .heading h4 {
251  padding: 30px 0;
252}
253
254.introduction p {
255  font-size: 13px;
256  font-weight: 500;
257}
258
259/* ranking */
260.ranking {
261  padding-top: 50px;
262}
263
264.ranking figure {
265  padding-bottom: 30px;
266}
267
268.ranking p {
269  font-size: 13px;
270}
271
272:is(.ranking, .archive) h4 {
273  padding-bottom: 30px;
274}
275
276/* archive */
277.archive {
278  padding-top: 50px;
279}
280
281.archive p {
282  font-size: 13px;
283  border-top: 1px solid rgb(51, 51, 51);
284  padding: 17px 20px;
285}
286
287.archive p:last-child {
288  border-bottom: 1px solid rgb(51, 51, 51);
289}
290
291@media(max-width: 768px) {
292  .column {
293    flex-flow: column;
294  }
295
296  .main-image, .side-column {
297    width: 100%;
298    box-sizing: border-box;
299    padding-left: 15px;
300    padding-right: 15px;
301  }
302}
303