title: Animated CSS underline on delay
body: <p>I'm trying to animate (left to right) an underline with a transition delay on page load. I know how to get it working on hover, but not on load. Trying something like this but not sure why it won't work. </p>
  
  <pre><code>.under {
      position: relative;
      text-decoration: none;
      display: inline-block;
  }
  .under::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      -webkit-transition-delay: 2s; 
      transition-delay: 2s;
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  </code></pre>