hoverでボックスの高さが増える

Question

hoverでborder-bottom表示を指定しているのですが、ボーダー分ボックスの高さが増えて、下のボックスが上下してしまいます。
可変するため、.overfooterの高さを固定したりはできません・・・。どのように直せば良いのでしょうか？
よろしくお願いします。

<aside class="overfooter">
<div class="about">
	<h4 class="headline_secondary">サイトについて</h4>
	<ul>
		<li><button type="button" class="text_secondary">お問い合わせ</button></li>
		<li><button type="button" class="text_secondary">twitter</button></li>
		<li><button type="button" class="text_secondary">RSS</button></li>
	</ul>
</div>
</aside>
<footer>
	<p>Copyright © 2020 hogehoge. All Rights Reserved.</p>
</footer>

.text_secondary {
color: #1968FC;
font-size: 16px;
}

.text_secondary:hover {
border-bottom: solid 1px #1968FC;
}

.overfooter{
background-color: #F6F9FF;
margin: 24px auto 0 auto;
padding-top: 30px;
padding-bottom: 30px;
border-top: solid 5px #B2BBCD;
}

.about{
max-width: 1024px;
height: auto;
margin: 24px auto 0 auto;
}

.about li{
display: inline-block;
margin-right: 16px;
}

footer{
width: 100%;
height: 52px;
padding-top: 16px;
text-align: center;
background-color: #B2BBCD;
}

footer p{
color: #fff;
font-size: 14px;
}

Answer 1

.text_secondary {
color: #1968FC;
font-size: 16px;
border-bottom: solid 1px rgba(0,0,0,0);/* ADD */
}

Comments

[coca0127]

早速ありがとうございます！
透明のボーダーをホバー前に追加すれば良いのですね。
とても助かりましたmm