アスタリスク表示してマウスホバーで注釈表示

Ads

Result


注釈がある事をアスタリスク(これ→*)で明示し、マウスホバーで表示する、みたいなの。
dfnタグのtitle属性をテキスト化する形で表示しています。

css

dfn[title] {/*dfnタグをヘルプカーソルに*/
  cursor: help;
  position: relative;
  font-style: normal;
}
dfn[title]:after {/*疑似要素でアスタリスクを表示、注釈がある事を明示する*/
  content: '*';
  color: red;
  display: inline;
  text-align: right;
  white-space: nowrap;
  vertical-align: super;
  font-size: 0.6em;
  padding-left: 2px;
}
dfn[title]:hover:after {/*title属性をcontentプロパティに挿入し、マウスホバーで表示する*/
  content: " (" attr(title) ")";
  min-width: 100%;
  color: red;
  vertical-align: inherit;
  font-size: inherit;
  padding-left: 0;
}

html

現在の日本の<dfn title="「首都」に関しては、様々な辞典類・事典類にそう記述されているが、直接的に首都が東京であることを定めた法令は存在しない">事実上の首都である</dfn>。

via

CSS Only In-Place Translation