cssでhoverした時に疑似要素の文字や画像を出現させる2013-06-21

サンプルなので全部の画像を作ってません。1つを使いまわしてます。

css

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:"料金";

manakaa.com