アスタリスク表示してマウスホバーで注釈表示
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