title: Border Bottom left to right when Div Hover using CSS
body: <p>I am trying to do <strong>blue border animation at the bottom</strong> of box-like below image.</p>
  
  <p><a href="https://i.stack.imgur.com/M0uld.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M0uld.png" alt="Image"></a></p>
  
  <p><em>But in my code, it displayed in the box.</em>
  <strong>My code is</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>.b-shadow:hover {
                  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);border:1px solid #edeaea; border-radius:5px;
              }
                .b-shadow:hover:after {
                  width: 100%;
              }
              .b-top &gt; div:after {
                  content: '';
                  display: block;
                  width: 0;
                  height: 2px;
                  background: #000;
                  transition: width .3s;
              }
  
                  .b-shadow {
                      border: 1px solid transparent
                  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-12 b-top" style="padding:50px 30px;"&gt;
          &lt;div class="col-md-6  b-shadow" style="
              padding:20px"&gt;
              &lt;img src="https://image.shutterstock.com/z/stock-vector-question-mark-in-a-speech-bubble-icon-720160648.jpg" width="50px" /&gt;
              &lt;div style="color:#000;"&gt;
                  &lt;h3 style="font-weight:600;"&gt;Learning Center&lt;/h3&gt;
                  &lt;p&gt;Use the Learning Center&amp;nbsp;to find an answer on your own.&amp;nbsp;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 b-shadow" style="padding:20px;"&gt;
              &lt;img src="https://image.shutterstock.com/z/stock-vector-question-mark-in-a-speech-bubble-icon-720160648.jpg" width="50px" /&gt;
              &lt;div style="color:#000;"&gt;
                  &lt;h3 style="font-weight:600;"&gt;Learning Center&lt;/h3&gt;
                  &lt;p&gt;Use the Learning Center&amp;nbsp;to find an answer on your own.&amp;nbsp;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need a border at the bottom of the div like below image
  <a href="https://i.stack.imgur.com/2BZz9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2BZz9.png" alt="Correct snippet"></a></p>