やりたい事

• リンクを:hoverした際に上にテキストを表示させる。
• テキストの文字数が変わっても崩れない。

  See the Pen LYEXedW by KARIN (@kkkarin) on CodePen.

参考：意外と知らないvisibilityの活用方法！

補足

content(擬似要素)にテキストを入れる場合の注意

デメリットとしては、SEO的な側面になりますが、疑似要素に指定された文言はテキストとしてみなされないという点です。

googleのクローラーはHTMLのコードを解析し、テキストに何が書かれているか把握しています。

CSSの疑似要素で文字を追加しても、その部分はテキストとしてみなされません。大切なことは疑似要素ではなく、HTML内に記述するようにしましょう。

引用元：CSSの疑似要素の使い方！ befor・after をマスターしよう