解説
cssのafter
擬似要素にcontent
プロパティで値attr(href)
を指定し、hover
時に表示する感じです。
必要に応じて見た目の装飾をしてあげて下さい。
なお、a
タグにはposition: relative
を指定したほうが良いかもしれません。
デモ
https://codepen.io/tdkn/full/dXNZKW/
コード
html
<a href="http://io.tedokon.com">ここ!</a>
css
a:after {
position: absolute;
content: attr(href);
display: none;
}
a:hover:after {
display: block;
}