abbr要素のCSS

Ref: 我的春秋: abbr の title 値を CSS でポップアップ

マウスオーバーで原語(title 属性値)を表示

今度は :hover の後に、:after 擬似要素を持ってくるという、ちょっとアクロバティックな合わせワザ。以下の "CSS" の部分にマウスを乗せてみてください。title 属性値が表示されるはずです。

  • CSS
abbr {

cursor: help;

}
abbr:hover:after {

margin: auto 2px;
border: 1px #333 solid;
content: attr(title) " の略。";
background: #E3CFA6;

}

html
<abbr title="xxxxx">XXXXX<abbr>

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中


%d人のブロガーが「いいね」をつけました。