JSFiddle - React, Tailwind, and code Playground

by Tony Realovich

HTML

<div class="digit" data-digit="Один">1</div>
<div class="digit" data-digit="Два">2</div>
<div class="digit" data-digit="Три">3</div>

CSS

.digit {
    position: relative;
    font-family: Verdana;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #ccc;
    font-size: 18px;
    margin-bottom: 10px;
}

.digit:hover::after {
    content: attr(data-digit);
    background: #f7f7f7;
    height: 40px;
    padding: 0 20px;
    position: absolute;
    top: 0;
    left: 50px;
}