title: Animate borders (border-left, border-top) of box on hover
body: <p>I would like to animate two borders on hover specifically border-left and border-top. After doing some research it does not seem you can actually "animate" the borders themselves so you have to create a "line" which on hover should have its width set to 100% to have the same effect. </p>
  
  <p>I know how to do this with underlining menu items, but I would like to do it with this box I'm trying to create. 
  Specifically on hover (while maintaining the css effects already written up) </p>
  
  <p>1) border-left should extend to the top and right after that-> 2) border-top extending from the left to the right. </p>
  
  <p>Also was wondering how I can choose which borders to extend if I don't want to to just do border-left or border-top. </p>
  
  <p>This is my box thus far (unfortunately nothing with animating borders):</p>
  
  <p>CSS:</p>
  
  <pre><code>#txt{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:2vw;
  }
  #box{
      position:fixed;
      top:25%;
      left:25%;
      height:20vw;
      width:20vw;
      border-right: 2px solid deepskyblue;
      border-bottom: 2px solid deepskyblue;
      background-color:black;
      color:ghostwhite;
  }
  #box:hover{
      color:deepskyblue;
      transition: color 0.25s ease;
  }
  #box:after{
      content:"";
      position:absolute;
      bottom: 0;
      left: 0;
      width:100%;
      height:100%;
      transform: scale(0, 0);
      transform-origin:bottom right;
      background: ghostwhite;
      z-index: -1;
      transition: transform 0.25s ease;
  }
  #box:hover::after{
      transform: scale(1, 1);
      color:deepskyblue;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="box"&gt;
  &lt;span id="txt"&gt;TEXT&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>