【HTML+CSS】リンクテキストにマウスホバーで背景がにゅっ。

サンプルページ

黒背景で使えるサンプル。
カラバリはいろいろ変更できる。
リンクの下線は消去していて、訪問前後でも色を変更していない。
▽CSSの中身

body {
 background-color: #1C1C1C;
 color: #FFFFFB;
}
a { 
 padding: 0 .3em; 
 background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255, 255, 251, 1) 50%); 
 background-position: 0 0; 
 background-size: 200% auto; 
 transition: .3s; 
 text-decoration: none; 
} 
a:link, 
a:visited{ 
 color: #FFFFFB; 
} 
a:hover { 
  background-position: -100% 0; 
  color: #1C1C1C; 
}