title: Overlap ::after and ::before with text in CSS
body: <p><strong>Goal:</strong> Make nice effect of hovering buttons in pure CSS, which will use <code>::after</code> and <code>::before</code> pseudo-elements. Look at this <strong><a href="https://jsfiddle.net/LL0f7rwp/" rel="nofollow">jsFiddle</a></strong> example to see, what I want to reach.</p>
  
  <p><strong>Code:</strong> Button will have some styling, also an <code>background-color</code>, which is turned off in this example.</p>
  
  <pre><code>.button {
      display: inline-block;
      position: relative;
      height: 35px;
      line-height: 35px;
      padding: 0 15px;
      /*background-color: white;*/
      text-decoration: none;
      color: black;
  }
  </code></pre>
  
  <p><strong>Problem:</strong> I want to use <code>background-color</code> and when I enable it, then I can't see pseudo-elements. It is like that, because these pseudo-elements have <code>z-index: -1;</code>, which put them behind the background. When I change <code>z-index</code> to <code>0</code> or <code>1</code>, then text is not visible.</p>
  
  <p><strong>What I can't do:</strong> I can't add new elements inside buttons (like <code>span</code>s), because this is one already running website and client decided to change the behavior of buttons, so here I am. There are tons of buttons in this website, so this is the reason, why I want to find solution with pseudo-elements, because trying to find every single button and change them would be inappropriate.</p>