How can I replicate this with css?
<p>So I was playing around with some CSS, and wanted to give my titles a specific style. What I was thinking about was something like the image I made here:</p>

<p><a href="https://i.stack.imgur.com/0en15.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0en15.png" alt="Example image"></a></p>

<p>I tried to google for people who wanted the same, but I couldn't really find what I was looking for.</p>

<p>This is what I have so far:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
  position: relative;
  font-size:40px;
  height:40px;
  width:400px;
}
.test&gt;span {
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  height: 60%;
  color: #31FF5A;
}
.test&gt;.top{
  z-index:2;
  top:0;
}
.test&gt;.bottom{
  color: black;
  height: 100%;
  z-index:1;
  bottom: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
  &lt;span class="top"&gt;TEXT&lt;/span&gt;
  &lt;span class="bottom"&gt;TEXT&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Any one of you who can help me out? Or atleast in the right direction :P</p>

<p>Thanks!</p>