JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Плохо</h1>
<p>Между строками образуется «дыра», в которой ссылки перестают ховериться:</p>
<ul>
<li><a href="#">Что нужно для&nbsp;признания иностранного гражданина высококвалифицированным специалистом</a>, совет Сергея Петрова</li>
<li>Свежая статья у партнёров: «<a href="#">На&nbsp;2013 год установлены величины минимального и&nbsp;максимального пособия по&nbsp;безработице</a>»</li>
</ul>

<h1>Хорошо</h1>

<p style="background: #ffe;"><em style="color: red;">Важно:</em> На самом деле это плохой пример с inline-block, который рвёт поток, вот хороший: <a href="http://jsfiddle.net/DbdmP/8/" target="_blank">http://jsfiddle.net/DbdmP/8/</a></p>

<br>

<p>Курсор не мелькает:</p>
<ul class="good">
    <li><a href="#"><u>Что нужно для&nbsp;признания иностранного гражданина высококвалифицированным специалистом</u></a>, совет Сергея Петрова</li>
<li>Свежая статья у партнёров: «<a href="#"><u>На&nbsp;2013 год установлены величины минимального и&nbsp;максимального пособия по&nbsp;безработице</u></a>»</li>
</ul>

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

h1 {
    font-weight: bold;
    margin-bottom: .5em;
}

ul {
    margin-bottom: 2em;
    margin-left: 2em;
}

ul li {
    margin-bottom: 1em;
}

a {
    text-decoration: none;
    border-bottom: 1px solid;
    color: blue;
}

a:hover {
    color: red;
}

/* !!! */
.good a {
    /*padding: .4em 0 0;*/
    display: inline-block;
    border: none;
}

.good a u {
    text-decoration: none;
    border-bottom: 1px solid;
}