JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer-nav"> <a href="#" style="color: inherit;">
               <div class="preview">
                   <div class="img"></div>
<span>Previous:</span><br>
  <span>Title abc</span>              
  </div>
  </a>

 <a href="#" style="color: inherit;">
               <div class="preview">
                   <div class='img'></div>
<span>Next:</span><br>
  <span>Title abc</span>              
  </div>
  </a>

    </div>
</div>

CSS

.footer-nav {
    overflow: hidden;
    margin-bottom: -19px;
    margin-right: -18px;
}
.preview {
    float: right;
    border-top: 1px dashed #c9c7c7;
    border-left: 1px dashed #c9c7c7;
    padding: 8px;
    width: 262px;
    background: #e3e3e3;
}
 .img {
    float: left;
    width: 45px;
    height:40px;
    margin-right: 5px;
    margin-top: 1px;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png');
}

 .preview:hover{
  background-color:#cecece;
  }
.preview:hover .img{
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');    
}