CSSだけでaタグのリンク先プレビューを表示する

解説

cssのafter擬似要素にcontentプロパティで値attr(href)を指定し、hover時に表示する感じです。

必要に応じて見た目の装飾をしてあげて下さい。

なお、aタグにはposition: relativeを指定したほうが良いかもしれません。

デモ

コード

html

<a href="http://io.tedokon.com">ここ！</a>

css

a:after {
  position: absolute;
  content: attr(href);
  display: none;
}

a:hover:after {
  display: block;
}