title: Why is the + selector not working with pseudo-class :focus?
body: <p>I'm using the <code>+</code> selector in CSS with then pseudo-class <code>:focus</code>.</p>
  <p><strong>Code:</strong></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>.main__form__input {
    margin: 1.6rem 0;
    display: block;
    position: relative;
  }
  
  .main__form__input__before,
  .main__form__input__after {
    height: .3rem;
    position: absolute;
    bottom: 1rem;
    left: 0;
  }
  
  .main__form__input__before {
    background-color: #adadad;
    width: 100%;
    z-index: 0;
  }
  
  .main__form__input__after {
    background-color: #000;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease-in-out;
    z-index: 1;
  }
  
  .main__form__input__field:hover+.main__form__input__after {
    transform: scaleX(1);
  }
  
  .main__form__input__field {
    width: 100%;
    border: none;
    padding: 1em;
  }
  
  .main__form__input__field,
  .main__form__input__field::placeholder {
    font-size: 2.4rem;
    font-weight: 400;
    font-family: Lato, sans-serif;
  }
  
  .main__form__input__field:focus,
  .main__form__input__field:focus-visible {
    outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main__form__input"&gt;&lt;input type="text" class="main__form__input__field" placeholder="What is your best friend's name?"&gt;
    &lt;div class="main__form__input__before"&gt;&lt;/div&gt;
    &lt;div class="main__form__input__after"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>My Aim:</strong></p>
  <p>Whenever the user clicks on the input field, I want the <code>.main__form__input__after</code> class go from  <code>transform: translateX(0)</code> to <code>transform: translateX(1)</code></p>
  <p>It will provide an animation such that whenever the user clicks on the input field, the border below it <em>(which is actually a <code>div</code>)</em> will go from grey to black.</p>
  <hr />
  <p><strong>Thank You!</strong></p>