マウスオーバー時に上部にテキスト表示したい。

Question

マウスオーバーテキストに対し、テストをいう字をマウスオーバー時に表示させたいんですが、親要素(test_parent)に対して子要素(test_parent_text)が中央に来るように配置できません。
以下のコードで配置はできたんですが、画像のように左右に余白が生まれてしまいます。これをなくしたいです。

試したこと
display:inline-blockを入れたが、変わらず...。
leftとrightをいれないとどちらかによってしまい、中央に行かなくなります。

どのように変えればいいですか？

<div class="test_parent">マウスオーバーテキスト<span class="test_parent_text">テスト</span></div>

.test_parent {
	position: relative;
	display: inline-block;
	cursor: pointer;

}
.test_parent .test_parent_text {
　position: absolute;
  display: inline-block;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 100%;
  text-align: center;
}
.test_parent .test_parent_text::after {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	content: ' ';
}
.test_parent:hover .test_parent_text {
	visibility: visible;
	opacity: 1;
}

Answer 1

test_parent_textを左右中央にする方法ですが、
こちらをお試しください。

元

  left: 0;
  right: 0;

変更後

  left: 50%;
  transform: translateX(-50%);

参考

https://cotodama.co/position-absolute-center/

Comments

[退会済みユーザー]

こんな書き方あったんですね...。
なんか何やってるかわからなくなってきました。解説はしていただけたりしますか？各属性?がどういう役割なのか

[AsukaKobayashi]

left は、position:absoluteの時、position:relativeの要素の左端からの位置ですね。
left:50%なので、test_parent の左端から50%の位置に、test_parent_textの左端が来ます。

transform: translateX(-50%);は、要素を元の位置から横方向（X軸）に移動するものになります。
要素の横幅の50%分の距離を左へ移動します。

図にして説明すると分かりやすいと思うので…このあたりの図を見ると良いかもしれません。

https://minimally-life.com/%E3%80%90css%E3%80%91position%E3%81%A8transform%E3%81%A7%E4%B8%8A%E4%B8%8B%E5%B7%A6%E5%8F%B3%E3%80%81%E4%B8%AD%E5%A4%AE%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E8%A7%A3/

[退会済みユーザー]

ややこしいですね...。勉強になりました...。