JSFiddle - React, Tailwind, and code Playground

by Alexander Tartmin

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <span>...</span>
    <li>134</li>
    <li>135</li>
    <li>136</li>
    <li>137</li>
    <span>...</span>
    <li>234</li>
    <li>235</li>
    <li>236</li>
    <li>237</li>
</ul>

CSS

li {
    display: inline-block;
}

JavaScript

$('li').hover(function() {
    var pageNum = $(this).html(), 
        pageNumFloat = pageNum;
    if (pageNum > 100) pageNumFloat = (pageNum *= 0.09) - 1;
    else if (pageNum > 200) pageNumFloat = (pageNum *= 0.2) - 10;
    $(this).css({
        'border-bottom-style': 'solid',
        'border-bottom-color': 'red',
        'border-bottom-width': pageNumFloat + 'px'
    });
    console.log();
}, function() {
        $(this).css('border-bottom', 0);
    });