title: CSS: hover over div to animate text-decoration within
body: <p>I am trying to create a div where when the user hovers over it the link within is underlined. Right now I've been able to get it to work where if the user hovers over the link itself it creates the animation, but I would like to trigger the animation when hovering over the div instead.</p>
  
  <p>Could this be done with pure css? Or do I need to call it with Javascript?</p>
  
  <p><a href="http://jsfiddle.net/jB9WU/3/" rel="nofollow">http://jsfiddle.net/jB9WU/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="module-link"&gt;
                       &lt;label&gt;&lt;a href="job_information.php"&gt;Job Information&lt;/a&gt;&lt;/label&gt;
                      &lt;img src="images/project.png"/&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.module-link{
      font-family: futura-medium, Geneva, sans-serif;
      font-size:20px;
      float:left;
      width:108px;
      height:180px;
      margin:20px;
      padding:20px;
      background: #CDCDCD;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border:1px solid #b1b1b1;
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
          -ms-transition: all 1s ease;
           -o-transition: all 1s ease;
              transition: all 1s ease;
  }
  .module-link:hover {
         background: #EDEDED;
         -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
          -ms-transition: all 1s ease;
           -o-transition: all 1s ease;
              transition: all 1s ease;
  }
  .module-link label{
      text-align:center;
      font-variant: small-caps;
        left:0;
         right:0;
         margin:auto;
         display: block;
         margin-bottom: 25px;
  
  }
  .module-link img{
         left:0;
         right:0;
         margin:auto;
         width:100px;
         display: block;
  }
  .module-link a{
      text-decoration:none;
      color:#000;
      display:inline;
  }
  .module-link a:after{
      conent: '';
      content: '';
      display: block;
      border-bottom: 1px solid #000;
      width: 0;
      -webkit-transition: 0.5s ease;
              transition: 0.5s ease;
  }
  .module-link :hover:after { width: 100%; }
  </code></pre>