テキストhover時に、その背景をグラデーションで塗りつぶす効果です。次のサンプルのテキストにhoverすると、上から順に下へ向かって背景をグラデーションで塗りつぶします。
サンプル
htmlソース
<div id="test">
<a href="#">ダミーテキスト 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に…
--中略--
…奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</a>
</div>
CSSソース
#test a {
background-size: 0% 25px;
background-repeat: no-repeat;
background-position: 0% 50%;
transition: all 0.9s ease-in-out;
background-image: linear-gradient(to right, #ff7 0%, tomato 100%);
color: #222;
text-decoration: none;
font-size: 20px;
}
#test a:hover {
background-position: 0% 50%;
background-size: 100% 25px;
-webkit-background-size: 100% 25px;
}
