Переключатель переключения с скользящим фоном и метками динамической длины ⇐ Html

[Anonymous]

With Vue.js I'm trying to replicate this toggle button from TailGrids:


This kind of switch isn't among the TailGrids примеры. Я смог воспроизвести общий стиль с Tailwind. Я также нашел код для аналогичных коммутаторов: < /p>

Код: Выделить всё

* { font-family: sans-serif; }

.switchbox label {
display: inline-block;
cursor: pointer;
position: relative;
width: 70px;
height: 20px;
border: 1px solid #c1c1c1;
border-radius: 3px;
}
.switchbox label span.on,
.switchbox label span.off {
position: absolute;
top: 0;
width: 50%;
line-height: 1.4;
font-size: 12px;
font-weight: 600;
height: 16px;
padding: 2px 0;
text-align: center;
}
.switchbox span.on {
color: black;
right: inherit;
left: 0;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.switchbox span.off {
right:0;
color: black;

border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.switchbox input {
display: none;
}
.switchbox input:checked + label:before {

color: black;
}
.switchbox input:checked + label:after {

color: #737373;
}

label{
position:relative;
}

.switchbox input + label:before {
transition:0.3s;
content:""; display:block;
width:50%;
height:20px;
position:absolute;
left:0;
top:0;
background: #a5a5a5; /* W3C */
}

.switchbox input:checked + label:before {
left:50%;
}< /code>



ON
OFF

Эта реализация анимирует метку: до псевдоэлемента и перемещает свою абсолютную позицию на 50% вправо при проверке ввода. Но как я мог сделать эту работу с двумя текстами разных длины?

Подробнее здесь: https://stackoverflow.com/questions/797 ... mic-length