Wie erhalte ich dynamisch die Anzahl der Zeichen in einer HTML-Überschrift oder einem Absatzelement in CSS? ⇐ CSS

[Anonymous]

Ich versuche, für bestimmte Abschnitte (Code-Erklärungen) einen dynamischen „Textverarbeitungs-/Schreibmaschinen“-Effekt auf meinen Webseiten zu erstellen.
Ich habe Folgendes erstellt:

Code: Select all

Typerwriter Effect




This is a typing test.

und für das CSS:

Code: Select all

.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; }
}

Was den richtigen Effekt ergibt. Dies funktioniert jedoch nur, wenn ich die Zeichen in den Überschriften- oder Absatzobjekten zähle, bevor ich das CSS fertigstelle.
Für die Zwecke meiner Website, auf der ich viele Codeabsätze habe, die ich in diesem Stil anzeigen möchte, würde das bedeuten, dass ich das alles für jeden einzelnen Absatz nur aufgrund der Zeichenanzahl duplizieren müsste.
Gibt es eine Möglichkeit, dies dynamisch zu gestalten? Könnte ich irgendwie JavaScript verwenden, um eine Abfrage durchzuführen, um die Länge der Zeichen zu ermitteln und diese „Variable“ irgendwie in das CSS für jeden Abschnitt einzufügen, wie er im Ansichtsfenster angezeigt wird?
Irgendwelche besseren Ideen?