title: Hover over parent div to affect pseudo after elements of child. Underline animation
body: <p>Currently I can hover over h1 and it will be underlined, but I want to know if I hover over the parent div can I activate the pseudo after elements of h1?</p>
  
  <p>I am trying to preserve the line width to h1 only. Other methods I've tried will take the full width of the div.</p>
  
  <p>So when hovering over h2 or h3, the underline becomes active on h1.</p>
  
  <p>Is this do-able in CSS only or do I need to use Javascript?</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>.nav-underline {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .nav-underline:before, .nav-underline:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 3px;
    top: 45%;
    margin-top: -0.5px;
    background: #000;
  
  }
  
  .nav-underline:hover {
      letter-spacing: 4px;
      transition: .35s;
  }
  .nav-underline:before {
    left: -2.5px;
  }
  .nav-underline:after {
    right: 2.5px;
    background: #000;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  
  .nav-underline:hover:before {
    background: #000;
    width: 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  
  .nav-underline:hover:after {
    background: transparent;
    width: 100%;
    transition: 0s;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/&gt;
  &lt;a class="imagereveal" href="#" rel="image goes here"&gt;
     &lt;div class="nav-underline"&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;/div&gt;
     &lt;h2&gt;Description&lt;/h2&gt;
     &lt;h3&gt;Detail&lt;/h3&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/jvo8wo65/" rel="nofollow noreferrer">https://jsfiddle.net/jvo8wo65/</a></p>