JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<ul>
    <li>
        <span class="text">
            Huuuuulabula
        </span>
        <span class="label">
            <span class="percent">
                38%
            </span><span class="text"></span>
        </span>
    </li>
</ul>

SCSS

$labelWidth: 50px;
$labelPadding: 2px;
$labelHeight: 1.5em;
$labelDivider: 10px;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    li {
        position: relative;
        line-height: $labelHeight;
        height: $labelHeight;
        
        .label {
            background: #CE5555;
            color: white;
            padding: $labelPadding;
            border-radius: 2px;
            position: relative;
            overflow: hidden;
            width: $labelWidth;
            display: block;
            white-space: nowrap;
            z-index: 2;
            
            .text {
                color: white !important;
                display: inline-block;
                padding-left: 10px;
            }
            
            .percent {
                text-align: center;
                font-weight: bold;
                width: $labelWidth;
                display: inline-block;

            }
        }
        
        & > .text {
            display: block;
            position: absolute;
            left: $labelWidth + $labelDivider;
            top: 0;
            color: black;
            z-index: 1;
            line-height: $labelHeight;
            height: $labelHeight;
            padding: $labelPadding;
        }
    }
}

JavaScript

$(function() {
    $("li").on("mouseenter", function() {
        var width = $(this).width() - 4; //with minus padding
        
        //Animate label to full width
        $(this).find(".label").stop().animate({
            width: width
        }, 200);
    }).mouseleave(function() {
        //restore label
        $(this).find(".label").stop().animate({
            width: "50px"
        }, 300);
    }).each(function() {
        //duplicate the text to SEO optimize
        var text = $(this).children(".text").text();
        $(this).find(".label").find(".text").text(text);
    });
});