title: Create Underline Transition CSS
body: <p>I want to make a header appear to have an animated <em>underline</em> when the parent element is hovered.  Right now it is very close but I can't seem to position it correctly so that its width grows in both directions from its center, which is what I want it to do.  Does someone know what I'm missing or need to add to my code to make this happen?  The code below is what I think is relevant to fixing the situation.  The entire project can be viewed via this <a href="https://codepen.io/Kotsenburg/pen/jwoVWw" rel="nofollow noreferrer">CodePen</a> as well.  Thanks in advance! (The underlining is only applied to the first header when hovering).</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="row flex-row"&gt;
      &lt;div id="top-image" class="image-block"&gt;
          &lt;h3&gt;Fish Tail&lt;/h3&gt;
  
          &lt;div class="underline"&gt;&lt;/div&gt;
  
          &lt;img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA"&gt;
      &lt;/div&gt;
      &lt;div class="image-block"&gt;
          &lt;h3&gt;Swallow Tail&lt;/h3&gt;
          &lt;img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY"&gt;
      &lt;/div&gt;
      &lt;div class="image-block"&gt;
          &lt;h3&gt;Directional&lt;/h3&gt;
          &lt;img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.image-block:hover &gt; h3{
      letter-spacing: 8px;
      transition: all .3s ease-in-out;
  }
  
  .underline {
      visibility: hidden;
      background-position: center;
      background-color: white;
      position: absolute;
      top: 60%;
      margin: 0;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      transform: scaleX(0);
      webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
  }
  
  .image-block:hover .underline {
      visibility: visible;
      transform: scaleX(1);
      width: 100%;
      height: 10px;
      transition: all .3s ease-in-out;
  }
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>I am trying to use the same ideas from someone else's <a href="https://codepen.io/Kseso/pen/bfzjC" rel="nofollow noreferrer">Underlining Effect CodePen</a>.  The biggest difference is I don't want to have an <code>&lt;a&gt;</code> inside my header. </p>