JSFiddle - React, Tailwind, and code Playground

by hellslam

HTML

<a href='#' class="imglink">There is no underlined whitespace at beginning of this text
</a>
<br/>
<br/>
<a href='#'>
    <img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>No Underlined Whitespace here.
</a>
<br/>
<br/>
<a href='#'>
    How come no underlined whitespace on this one?
</a>
<br/>
<br/>
<a href='#'>No Underlined Whitespace</a>

CSS

img {
    vertical-align: middle;
}

.imglink {
    background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat 0 0;
    height: 50px;
    display: block;
    background-size: 50px 50px;
    line-height: 50px;
    padding-left: 55px;
}