☰

アンカータグ内のタイトル属性のスタイルを変更するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css
アンカータグ内のタイトル属性のスタイルを変更するにはどうすればいいですか? 質問する

例：

<a href="example.com" title="My site"> Link </a>

ブラウザで「タイトル」属性の表示方法を変更するにはどうすればよいですか? デフォルトでは、背景が黄色でフォントが小さいだけです。これを大きくして、背景色を変更したいと思います。

タイトル属性にスタイルを設定するための CSS の方法はありますか?

ベストアンサー1

実際には、CSS 式、生成されたコンテンツ、属性セレクターのみを必要とする純粋な CSS ソリューションが存在するようですattr(これは、IE8 まで遡って動作することを示しています)。

https://jsfiddle.net/z42r2vv0/2/

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}
<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

@ViROscar からの入力による更新: 上記の例では「title」属性を使用していますが、特定の属性を使用する必要はないことに注意してください。実際には、CSS の恩恵を受けられないユーザーがコンテンツにアクセスできる可能性があるため、「alt」属性を使用することをお勧めします。

再度更新します。 "title" 属性は基本的に "tooltip" 属性を意味するようになったため、コードを変更しません。また、ホバー時にのみアクセス可能なフィールド内に重要なテキストを隠すのはおそらく良い考えではありませんが、このテキストをアクセス可能にすることに興味がある場合は、"aria-label" 属性が最適な場所のようです。https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/aria-label_attribute の使用

おすすめ記事