[CSS+HTML]半分色が違う色反転バナーもどき

半分で文字色反転するバナーを作りたかった

バナーの素体の色が半分で色が変わってて、それとは逆に文字が半分色が違う。
つまり背景と文字の色が反転している状態を半分ずつという状態。

おわかりいただけただろうか…

ほら真ん中の文字が両方の状態被ってるでしょ？
これがしたかったんだ

半分で文字色反転するバナーを作りたかった
実際のコード
1. HTML
2. CSS
バナー画像がいつまで経っても作れない人の苦肉の策
1. 第2弾ができました

実際のコード

HTML

<a class="banner-modoki" href="http://qooga.jb-jk.net/wp/"><div contenteditable="" data-heading=".*ベンキョウベヤ*.">.*ベンキョウベヤ*.</div></a>

data-headingとaタグの中身は『同じ文字』。
というのも、白側の文字はdata-headingで、黒側がaタグの中身だからね。

CSS

.banner-modoki {
 letter-spacing: 0.2rem;
 width:320px;
 display:block;
 height:60px;
 weight:234px;
 border:1px solid #000;
  background: -webkit-linear-gradient(left, #f9f9f9 0%, white 50%, black 50%, black 100%);
  background: linear-gradient(to right, #f9f9f9 0%, white 50%, black 50%, black 100%);
 position: relative;
}
.banner-modoki:hover {
 border:1px solid crimson;
} 
.banner-modoki div {
  font-size: 15pt;
 font-weight:bold;
  top: 50%;
  left: 50%;
  margin: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  white-space: nowrap;
position: absolute;
cursor: pointer;
}
.banner-modoki div:before {
  content: attr(data-heading);
  overflow: hidden;
  left: 0;
  top: 0;
  width: 50%;
  color: #000;
position: absolute;
}