Используя CSS3 градиенты, вы можете сделать это с чистым CSS и без JavaScript. Основная идея состоит в том, чтобы создать градиент, в котором цвет рамки, который вы хотите, представляет собой сплошной цвет до определенного цвета, а затем градиент является прозрачным. Вы должны рассчитать цветовые остановки в соответствии с размером шрифта и межбуквенным интервалом текста. Затем примените градиент к псевдоклассу элемента текста и вуаля.
Вот пример, который я создал для элемента span, содержащего сумму денег, собранную для организации. Каждый номер нуждался в розовой коробке вокруг этого. Причина, по которой градиент такой сложный, заключается в том, что я заставил его повторяться только после каждых 3 цифр, поскольку каждые 3 цифры были запятыми, которые должны были находиться за пределами полей и, следовательно, требовали дополнительного пробела. Если вы повторяете после каждого символа, это может быть намного проще, но я решил поделиться этим подходом, поскольку вы упомянули одометр. Вы также можете расширить эти градиенты, добавив браузерные префиксы, чтобы они работали в IE, Opera и т. Д.
html:
<span id="amount-raised">10,123</span>
css:
span#amount-raised {
position: absolute;
z-index: 1;
font-size: 70px;
letter-spacing: 10px;
color: #fff;
}
span#amount-raised:before { /* pink boxes */
content: '';
position: absolute;
top: 0; left: 0;
z-index: -1;
height: 100%; width: 100%;
background-image: -webkit-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
background-image: -moz-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
}