サンプルなので全部の画像を作ってません。1つを使いまわしてます。
nav{ margin-top:5em; font-size:1.2em; } nav ul{ width:90%; height:50px; margin:0 auto; } nav ul li{ float:left; list-style:none; } nav ul li a { text-decoration:none; display:inline-block; padding:0.5em 1em; color:#222; position:relative; } nav ul li a:hover{ color:red; } nav ul li a:after{ content:url(price.png); position:absolute; left:0; top:-2em; transform:scale(1,0) translate(0,-1em); transform-origin:left bottom; transition:0.3s; z-index:-1; opacity:0; } nav ul li a:hover:after{ transform:scale(1,1) translate(0,0); opacity:1; } 画像じゃなくテキストを出したい場合は、content:""; にして、""の中にテキストを入れる。例)content:"料金";