title: ::before with the same content as the first child
body: <p>I am creating various css buttons that looks like this:</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>body {
    height: 100vh ;
    display: flex ;
    flex-direction: column ;
    justify-content: center ;
    align-items: center ;
  }
  
  .btn {
    position: relative ;
    padding: 10px 20px ;
    overflow: hidden ;
    margin: 2px ;
    display: flex ;
    align-items: center ;
    background-color: transparent ;
    color: #912BFF ;
    text-decoration: none ;
    font-size: 15px ;
    border-radius: 4px ;
    border: 2px solid #912BFF ;
  }
  
  .btn::before {
    content: 'Hello 1' ;
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    display: flex ;
    justify-content: center ;
    align-items: center ;
    background-color: #912BFF ;
    color: #fff ;
    transition: all 0.5s ease ;
    opacity: 0 ;
    transform: scale(2) ;
  }
  
  .btn:hover::before {
    transform: scale(1) ;
    opacity: 1 ;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;a href="#" class="btn"&gt;Hello 1&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 2&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 3&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 4&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 5&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 6&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 6&lt;/a&gt;
    &lt;a href="#" class="btn"&gt;Hello 7&lt;/a&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now instead of having 'Hello 1' as the contents, I want to have the content match for the other classes as well. So when the content is 'Hello 2' for the link, the ::before pseudo element will also have the 'Hello 2' content so that it could work with any buttons created dynamically.</p>