アスタリスク表示してマウスホバーで注釈表示
Result
注釈がある事をアスタリスク（これ→*）で明示し、マウスホバーで表示する、みたいなの。
dfnタグのtitle属性をテキスト化する形で表示しています。
css
dfn[title] {
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 {
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
