Как динамически получить количество символов в поле H или поле абзаца в CSS? ⇐ Javascript

[Anonymous]

Я пытаюсь создать динамический эффект «текстового процессора/пишущей машинки» на своих веб-страницах для определенных разделов (пояснения кода).
Я создал следующее:

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

Typerwriter Effect




This is a typing test.

и для CSS:

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

.wrapper
{
height: 100vh;
display: flex;
place-items: center;
}

.wrapper p
{
font-family: monospace;
border-right: 3px solid black;
animation: typing 10s steps(22), blink 0.5s infinite step-end;
white-space: nowrap;
overflow: hidden;
}

@keyframes blink
{
0%, 100% { border-color: transparent; }
50% { border-color: black; }
}

@keyframes typing
{
0%   { width: 0ch; }
100% { width: 22ch; }
}

Что дает правильный эффект. Однако это работает только в том случае, если я подсчитываю символы в объектах «Заголовок» или «Абзац» до завершения CSS.
Для целей моего сайта, где у меня будет много абзацев кода, которые я хочу отобразить в этом стиле, это будет означать дублирование всего этого для каждого отдельного абзаца только из-за количества символов.
Есть ли какой-нибудь способ сделать это динамичным? Могу ли я каким-то образом использовать JavaScript для выполнения запроса, чтобы получить длину символов и каким-то образом внедрить эту «переменную» в CSS для каждого раздела, как она отображается в области просмотра?
Есть идеи получше?

Подробнее здесь: https://stackoverflow.com/questions/798 ... agraph-fie