LoginSignup
2
1

More than 3 years have passed since last update.

@KKKarin

【css】:hoverでちょっとした吹き出しを表示

Posted at

やりたい事

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

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

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

補足

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

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

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

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

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1