title: How to hide some text in string using CSS
body: <p>Please find updated code</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-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;title&gt;css&lt;/title&gt;
  &lt;head&gt;
  &lt;style&gt;
  #st {
  z-index: -114;
  margin-right: -80px;     
  }
  &lt;/style&gt;
  &lt;/head&gt;
  State Code : &lt;span&gt;&lt;span id="st"&gt;&lt;/span&gt;Maharashtra - MH&lt;/span&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I got below output but i need clear overlapped text</p>
  
  <p><a href="https://i.stack.imgur.com/G7NuQ.png" rel="nofollow noreferrer">enter image description here</a></p>