title: How to make "main content" move on "hover" and keep before/after pseudo-element static?
body: <p>The ideia is to make the &quot;support&quot; button move out of the initial position while a black background remains at the same spot.</p>
  <p>P.S.: This is only the second time I use this website. Im sorry if I didn't the most suitable layout here and thank you very much for you time and help!!</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>div {
    width: 60vw;
    margin: 100px auto;
    position: relative;
  }
  
  .test {
    background-color: rgb(202, 129, 27);
    display: block;
  }
  
  .test::before {
    content: "";
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    z-index: -1;
    transition: all 0.5s linear;
  }
  
  .test:hover::before {
    top: 20px;
    left: 20px;
    background-color: black;
  }
  
  .test:hover {
    top: 0px;
    left: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
        &lt;i class="fas fa-users fa-4x"&gt;&lt;/i&gt;
        &lt;h3&gt;Support&lt;/h3&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nemo
          quisquam iste aliquam nam nesciunt tempore consectetur quaerat libero
          impedit.
        &lt;/p&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>