hello world
カスタムデータ属性
- http://www.html5.jp/tag/attributes/data.html(b:title)
- http://dresscording.com/blog/html5/custom_data_attribute.html(b:title)
HTML
<p class="test" data-val="hello world">hello world</p>
CSS
.test{
font-size:96px;
position:relative;
z-index:1;
transition: color 1s;
}
.test:before{
margin:0 10px 0 0;
content:attr(data-val);
display:inline-block;
font-size:96px;
position:absolute;
left:5px;
top:5px;
z-index:-1;
color:#27ae60;
transition: color 1s;
}
.test:hover{
color:red;
transition: color 1s;
}
.test:hover:before{
color:transparent;
transition: color 1s;
}