title: Suggestions on how to improve my HTML and CSS making a hamburger icon that transitions to "X" in the code below?
body: <p>I'm interested in how I can improve my HTML and CSS? I didn't yet learn JS, even though I used it for onclick function, so I'm not currently interested in how to improve the JS in this code. I was wondering:</p>
  <ol>
  <li><p>Is it alright to use spans inside button for accessibility? First I had all divs, than made the parent div into a button tag so that the HTML is more accessible. Then I read that divs shouldn't be in button tags so I switched them for spans. Also input tag with checkbox is less informative probably?</p>
  </li>
  <li><p>Is it OK to use span tags instead of ::before and ::after? I was first trying with pseudoelements but they didn't work with flex and alignments somehow, so I used spans, and later didin't try with pseudoelements. Is there any benefit to writing pseudo as opposed to two additional spans?</p>
  </li>
  <li><p>Could I use flex and then style the transitions? I found that it was really hard to get the right dimensions when using flex, so I switched to position: absolute and insets. What is best practice when also doing transitions and having to calculate stuff?</p>
  </li>
  <li><p>I also don't understand why the effect after deleting this part of the code causes misalignment as I thought it should only cause the span &quot;lines&quot; to be &quot;longer&quot;:</p>
  <p>.burger-top-open,
  .burger-bot-open
  {
  width: 50%;
  }</p>
  </li>
  </ol>
  <p>LINK: <a href="https://jsitor.com/kAkUItFAM" rel="nofollow noreferrer">https://jsitor.com/kAkUItFAM</a></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-js lang-js prettyprint-override"><code>function myFunction() {
    var burgerTop = document.getElementsByClassName("burger-top");
    burgerTop[0].classList.toggle("burger-top-open");
  
    var burgerMid = document.getElementsByClassName("burger-mid");
    burgerMid[0].classList.toggle("burger-mid-open");
  
    var burgerBot = document.getElementsByClassName("burger-bot");
    burgerBot[0].classList.toggle("burger-bot-open");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  section {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-color: black;
  }
  
  .burger-box {
    all: unset;
    height: clamp(2rem, 20vw, 10rem);
    width: clamp(2rem, 20vw, 10rem);
    cursor: pointer;
    position: absolute;
  }
  
  .burger {
    position: absolute;
    height: 15%;
    width: 55%;
    background-color: darkblue;
    border-radius: 15rem;
    transition: transform 0.2s linear;
  }
  
  .burger-top {
    top: calc(25% - 6.25%);
    left: 0
  }
  
  .burger-mid {
    top: calc(50% - 6.25%);
    width: 100%;
  }
  
  .burger-bot {
    top: calc(75% - 6.25%);
    right: 0
  }
  
  .burger-top-open,
  .burger-bot-open {
    width: 50%;
  }
  
  .burger-mid-open {
    transform: rotate(-45deg);
  }
  
  .burger-top-open {
    transform: rotate(-315deg) translateX(25%) translateX(-6.25%);
  }
  
  .burger-bot-open {
    transform: rotate(-315deg) translateX(-25%) translateX(6.25%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;button class="burger-box" onclick="myFunction()"&gt;
      &lt;span class="burger burger-top"&gt;&lt;/span&gt;
      &lt;span class="burger burger-mid"&gt;&lt;/span&gt;
      &lt;span class="burger burger-bot"&gt;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>