{"id":25339,"date":"2022-11-30T10:21:26","date_gmt":"2022-11-30T18:21:26","guid":{"rendered":"https:\/\/coderpad.io\/?p=25339"},"modified":"2023-06-05T13:48:57","modified_gmt":"2023-06-05T20:48:57","slug":"how-to-create-a-typewriter-effect-in-vue","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-create-a-typewriter-effect-in-vue\/","title":{"rendered":"How To Create A Typewriter Effect In Vue"},"content":{"rendered":"\n

Typewriter effect<\/strong><\/em> is an animation that gives the impression that text is being typed on the screen one letter at a time, which can be a great way to grab a user’s attention. The typewriter effect can be created by using either CSS or JavaScript. Depending on the effect we want to create we will need to choose one over the other.<\/p>\n\n\n\n

When using only CSS, we don\u2019t have access to the text used for the effect but with JavaScript, we do, which means JavaScript has more potential to create a more feature-rich typewriter effect.  For example, JavaScript is the best option if we want to create a deleting-and-retyping effect like the one on CoderPad\u2019s registration page<\/a>:<\/p>\n\n\n\n

Setting up<\/h2>\n\n\n\n

For this article, we’ll be making use of the Vue environment on the CoderPad sandbox<\/a>. To create a new Vue sandbox, click on the Language<\/strong> tab on the sidebar and select Vue<\/strong> from the Frontend<\/strong> section.<\/p>\n\n\n\n

For adding syntax highlighting to our typewriter effect we will be using vue3-highlightjs<\/a>. In the sandbox shell, install the vue3-highlightjs<\/code> library:<\/p>\n\n\n

$ npm i vue3-highlightjs<\/code><\/span><\/pre>\n\n\n
\n
\ud83d\udca1 The CoderPad sandbox automatically starts your application and applies changes made during development without needing a manual refresh. <\/p>\n<\/blockquote>\n\n\n\n
Creating a typewriter effect with CSS<\/h2>\n\n\n\n
The typewriter effect in CSS is achieved by gradually revealing the text by increasing the width of its element from 0 to 100% using the CSS animation steps()<\/code> function. Then you\u2019ll add a blinking border that acts as a cursor that types out the text. Let\u2019s learn how it\u2019s done with a simple console.log<\/code> example.<\/p>\n\n\n\n
First, we need to define the text to be used for the typewriter effect.<\/p>\n\n\n
<script<\/span> setup<\/span>><\/span><\/script<\/span>><\/span>\n\n<template<\/span>><\/span>\n  <code<\/span>><\/span>\n    <div<\/span>><\/span>\n      <p<\/span> class<\/span>=\"typingEffect\"<\/span>><\/span>\n        console.log('Hello world')\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/code<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<style<\/span> scoped<\/span>><\/span>\n  code<\/span> {\n    background-color<\/span>: #202129<\/span>;\n    border-radius<\/span>: 4px<\/span>;\n    padding<\/span>: 20px<\/span>;\n    height<\/span>: 70px<\/span>;\n    color<\/span>: white;\n    display<\/span>: flex;\n    margin<\/span>: 0<\/span> auto;\n    align-items<\/span>: center;\n    width<\/span>: 350px<\/span>;\n  }\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, let\u2019s add the typing animation. <\/p>\n\n\n
.typingEffect<\/span> {\n    width<\/span>: 0<\/span>;\n    overflow<\/span>: hidden; \/* Ensure the text is not visible until the typewriter effect*\/<\/span>\n    border-right<\/span>: 2px<\/span> solid white; \/* The cursor*\/<\/span>\n    font-size<\/span>: 16px<\/span>;\n    white-space<\/span>: nowrap; \/* Keeps the text on a single line *\/<\/span>\n    animation<\/span>: typing 2s<\/span> forwards;\n  }\n\n\/* The typing animation *\/<\/span>\n@keyframes<\/span> typing {\n  from<\/span> { width<\/span>: 0<\/span> }\n  to<\/span> { width<\/span>: 100%<\/span> }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
After adding the above styles, here is what it will look like:<\/p>\n\n\n\n
\"\"\/
The sentence console.log(‘Hello world’)<\/strong> is printed word by word.<\/figcaption><\/figure>\n\n\n\n
We can see some typing animation going on but this obviously isn\u2019t what a typewriter effect looks like \u2013 we want to reveal the text letter by letter. This is where the CSS steps()<\/code> function comes in. With the steps()<\/code> function we can specify the number of steps the animation should take before completion.<\/p>\n\n\n
.typingEffect<\/span> {\n  \/\/\u2026\n  animation<\/span>: typing 2s<\/span> steps<\/span>(30<\/span>) forwards;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Here is what we get:<\/p>\n\n\n\n
\"\"
The sentence console.log(‘Hello world’)<\/strong> is printed word by word with a brief pause after printing.<\/figcaption><\/figure>\n\n\n\n
That’s more like it! If we still want to adjust the speed to make it slower or faster we can just tweak the animation delay and steps()<\/code> function.<\/p>\n\n\n\n
There is one more thing left to add to get a perfect typewriter effect, and that is the blinking cursor. This can easily be achieved by infinitely animating the background color of the border from transparent to its original color with the following animation.<\/p>\n\n\n
@keyframes<\/span> blink {\n  0%, 45% {\n    border-color<\/span>: transparent;\n  }\n  50%, 100% {\n    border-color<\/span>: white;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, modify the type typingEffect<\/code> class to use the blink<\/code> animation.<\/p>\n\n\n
.typingEffect<\/span> {\n  \/\/\u2026\n  animation<\/span>: typing 2s<\/span> steps<\/span>(30<\/span>) forwards, blink 1s<\/span> infinite;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, using what we have learned, let\u2019s create the \u201ccoding\u201d typewriter effect like you\u2019d see in an IDE. First, let\u2019s define the text for the typewriter effect:<\/p>\n\n\n
<script<\/span> setup<\/span>><\/span><\/script<\/span>><\/span>\n\n<template<\/span>><\/span>\n  <code<\/span>><\/span>\n    <div<\/span>><\/span>\n      <p<\/span> class<\/span>=\"typingEffect__line1\"<\/span>><\/span>\n        function helloWorld() {\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span>><\/span>\n      <p<\/span> class<\/span>=\"typingEffect__line2\"<\/span>><\/span>\n        console.log('Hello world')\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span><br<\/span>><\/span>\n    <div<\/span>><\/span>\n      <p<\/span> class<\/span>=\"typingEffect__line3\"<\/span>><\/span>}<\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/code<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<style<\/span> scoped<\/span>><\/span>\n  code<\/span> {\n    display<\/span>: block;\n    background-color<\/span>: #202129<\/span>;\n    padding<\/span>: 20px<\/span>;\n    color<\/span>: white;\n    overflow<\/span>: hidden;\n    margin<\/span>: 0<\/span> auto;\n    align-items<\/span>: center;\n    width<\/span>: 350px<\/span>;\n    height<\/span>: 130px<\/span>;\n  }\n\n  code<\/span> div<\/span> {\n    display<\/span>: inline-block;\n  }\n\n  .typingEffect__line2<\/span> {\n    padding-left<\/span>: 24px<\/span>;\n    box-sizing<\/span>: border-box;\n  }\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Above we are placing each line of code in a different paragraph element so that the typing animation can be done a line at a time and proper indentation can be added to the code. Here is the result:<\/p>\n\n\n\n
\"\"\/
A helloWorld()<\/code> function that logs “Hello world” to when called.<\/figcaption><\/figure>\n\n\n\n
Next, to add the typewriter effect where the code will be revealed line by line, we will be adding an animation delay to the second and third lines of code to prevent their animation from starting until the previous one is complete. <\/p>\n\n\n
code<\/span> p<\/span> {\n  width<\/span>: 0<\/span>;\n  margin-right<\/span>: 5px<\/span>;\n  overflow<\/span>: hidden;\n  border-right<\/span>: 2px<\/span> solid transparent;\n  white-space<\/span>: nowrap;\n}\n\n.typingEffect__line1<\/span> {\n  animation<\/span>: typing 2s<\/span> steps<\/span>(30<\/span>) forwards, blink 1s<\/span> 3<\/span>;\n}\n\n.typingEffect__line2<\/span> {\n  animation<\/span>: typing 2.5s<\/span> steps<\/span>(35<\/span>) 3s<\/span> forwards, blink 1s<\/span> 3s<\/span> 3<\/span>;\n}\n\n.typingEffect__line3<\/span> {\n  animation<\/span>: typing 0s<\/span> 6s<\/span> forwards, blink 1s<\/span> 6s<\/span> infinite;\n}\n\n@keyframes<\/span> typing {\n  from<\/span> {\n    width<\/span>: 0<\/span>;\n  }\n  to<\/span> {\n    width<\/span>: 100%<\/span>;\n  }\n}\n\n@keyframes<\/span> blink {\n  0%, 45% {\n    border-color<\/span>: transparent;\n  }\n  50%, 100% {\n    border-color<\/span>: white;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Here is the result:<\/p>\n\n\n\n
\"\"\/
The function helloWorld()<\/code> function printed in an animated style.<\/figcaption><\/figure>\n\n\n\n
Finally, to add syntax highlighting, we will first add vue3-highlightjs<\/code> to our app by modifying the main.ts<\/code> file to the following:<\/p>\n\n\n
import<\/span> { createApp } from<\/span> 'vue'<\/span>\nimport<\/span> App from<\/span> '.\/App.vue'<\/span>\nimport<\/span> vue3Highlightjs from<\/span> 'vue3-highlightjs'<\/span>\nimport<\/span> 'highlight.js\/styles\/dracula.css'<\/span>\n\ncreateApp(App).use(vue3Highlightjs).mount('#app'<\/span>)<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, we specify where we want to add highlighting using the v-highlightjs<\/code> directive and the language to be highlighted. To do this, modify the template tag in App.vue<\/code> to the following:<\/p>\n\n\n
<template<\/span>><\/span>\n  <div<\/span> v-highlightjs<\/span>><\/span>\n    <code<\/span> class<\/span>=\"javascript\"<\/span>><\/span>\n      <div<\/span>><\/span>\n        <p<\/span> class<\/span>=\"typingEffect__line1\"<\/span>><\/span>\n          function helloWorld() {\n        <\/p<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <p<\/span> class<\/span>=\"typingEffect__line2\"<\/span>><\/span>\n          console.log('Hello world')\n        <\/p<\/span>><\/span>\n      <\/div<\/span>><\/span><br<\/span>><\/span>\n      <div<\/span>><\/span>\n        <p<\/span> class<\/span>=\"typingEffect__line3\"<\/span>><\/span>}<\/p<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/code<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/template<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
With this, we are done building our coding typewriter effect using only CSS.<\/p>\n\n\n\n
Creating the typewriter effect in Vue<\/h2>\n\n\n\n
The typewriter effect with Vue is achieved by appending one character at a time to a string which is then displayed in the interface. Then we simply add a blinking pipe character ( | ) or border that acts as a cursor that types out the text. Let\u2019s learn how it\u2019s done with a simple console.log example.<\/p>\n\n\n\n
First, let’s create the typing area and define the text to be used for the typewriter effect:<\/p>\n\n\n
<script<\/span> setup<\/span>><\/span>\nimport<\/span> { ref } from<\/span> 'vue'<\/span>;\nconst<\/span> code = \"console.log('Hello world')\"<\/span>\nconst<\/span> typeValue = ref(''<\/span>)\n\n<\/span><\/script<\/span>><\/span>\n\n<template<\/span>><\/span>\n  <code<\/span>><\/span>\n    <div<\/span>><\/span>\n      <p<\/span> class<\/span>=\"typingEffect\"<\/span>><\/span>\n        {{ typeValue }}\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/code<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<style<\/span> scoped<\/span>><\/span>\ncode<\/span> {\n  background-color<\/span>: #202129<\/span>;\n  border-radius<\/span>: 4px<\/span>;\n  padding<\/span>: 20px<\/span>;\n  height<\/span>: 70px<\/span>;\n  color<\/span>: white;\n  display<\/span>: flex;\n  margin<\/span>: 0<\/span> auto;\n  align-items<\/span>: center;\n  width<\/span>: 350px<\/span>;\n}\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, let’s create a function which will be called when our app loads that will append each character of the code<\/code> variable to the typeValue<\/code> state which has been bound to the UI.  <\/p>\n\n\n
<script<\/span> setup<\/span>><\/span>\n\/\/ ...<\/span>\n\nconst<\/span> typeEffect = ()<\/span> =><\/span> {\n  if<\/span> (typeValue.value.length < code.length) {\n    typeValue.value += code.charAt(typeValue.value.length);\n    setTimeout(typeEffect, 50<\/span>);\n  } \n}\ntypeEffect()\n\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Above we have created a recursion function which will run until all characters of the code<\/code> variable have been appended to the typeValue<\/code> state. We usesetTimeout<\/code> to recursively call the typeEffect<\/code> function after 50 milliseconds <\/strong>so that characters won\u2019t be appended instantly in order to create the full feel of a typewriter effect. <\/p>\n\n\n\n
Here is the result:<\/p>\n\n\n\n
\"\"\/
console.log(<\/strong>‘Hello world’) printed with a typewriter style.<\/figcaption><\/figure>\n\n\n\n
Looking good so far. Finally, let\u2019s add the blinking cursor using the following styles:<\/p>\n\n\n
.typingEffect<\/span> {\n  padding-right<\/span>: 5px<\/span>;\n  border-right<\/span>: 2px<\/span> solid white;\n  white-space<\/span>: nowrap;\n  animation<\/span>: blink 1s<\/span> linear infinite;\n}\n\n@keyframes<\/span> blink {\n  0%, 45% {\n    border-color<\/span>: transparent;\n  }\n  50%, 100% {\n    border-color<\/span>: white;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, using what we have learned let\u2019s create the \u201ccoding\u201d typewriter effect. First, let’s create the typing area and define the text to be used for the typewriter effect:<\/p>\n\n\n
<script<\/span> setup<\/span>><\/span>\nimport<\/span> { ref } from<\/span> 'vue'<\/span>;\nconst<\/span> codeLine1 = \"function helloWorld() => {\"<\/span>\nconst<\/span> codeLine2 = \"console.log('Hello world')\"<\/span>\nconst<\/span> codeLine3 = \"}\"<\/span>\n\nconst<\/span> typeLine1 = ref(''<\/span>)\nconst<\/span> typeLine2 = ref({text<\/span>: ''<\/span>, state<\/span>: false<\/span>})\nconst<\/span> typeLine3 = ref({text<\/span>: ''<\/span>, state<\/span>: false<\/span>})\n\n<\/span><\/script<\/span>><\/span>\n\n<template<\/span>><\/span>\n  <code<\/span> class<\/span>=\"typingEffect\"<\/span>><\/span>\n    <div<\/span>><\/span>\n      <p<\/span> class<\/span>=\"typingEffect__line1\"<\/span>><\/span>\n        {{typeLine1}}\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> ><\/span>\n      <p<\/span> class<\/span>=\"typingEffect__line2\"<\/span>><\/span>\n        {{typeLine2.text}}\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> ><\/span>\n      <p<\/span> class<\/span>=\"typingEffect__line3\"<\/span>><\/span>\n        {{typeLine3.text}}\n      <\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/code<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<style<\/span> scoped<\/span>><\/span>\n.typingEffect<\/span> {\n  color<\/span>: white;\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  padding<\/span>: 20px<\/span>;\n  background-color<\/span>: #202129<\/span>;\n  margin<\/span>: 0<\/span> auto;\n  width<\/span>: 350px<\/span>;\n  height<\/span>: 120px<\/span>;\n}\n\n.typingEffect__line2<\/span> {\n  margin-left<\/span>: 24px<\/span>;\n}\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Above we have declared typeLine2<\/code> and typeLine3<\/code> as objects in order to add a state<\/code> property which we will use later on to control the typing animation.<\/p>\n\n\n\n
Next, let\u2019s create the functions that create the typing animation by appending each character of codeLine1<\/code>, codeLine2<\/code>, and codeLine3<\/code> variables to their respective state.<\/p>\n\n\n
const<\/span> typeEffect3 = ()<\/span> =><\/span> {\n  typeLine3.value.text += codeLine3.charAt(typeLine3.value.text.length);\n}\n\nconst<\/span> typeEffect2 = ()<\/span> =><\/span> {\n  if<\/span> (typeLine2.value.text.length < codeLine2.length) {\n    typeLine2.value.text += codeLine2.charAt(typeLine2.value.text.length);\n    setTimeout(typeEffect2, 60<\/span>);\n  }\n  if<\/span>(typeLine2.value.text.length === codeLine2.length && !typeLine3.value.state) {\n    setTimeout(typeEffect3, 500<\/span>)\n    typeLine3.value.state = true<\/span>\n  }\n}\n\nconst<\/span> typeEffect1 = ()<\/span> =><\/span> {\n  if<\/span> (typeLine1.value.length < codeLine1.length) {\n    typeLine1.value += codeLine1.charAt(typeLine1.value.length);\n    setTimeout(typeEffect1, 60<\/span>)\n  }\n  if<\/span>(typeLine1.value.length === codeLine1.length && !typeLine2.value.state) {\n    setTimeout(typeEffect2, 800<\/span>)\n    typeLine2.value.state = true<\/span>\n  }\n}\ntypeEffect1()<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Above we have created three functions typeEffect1<\/code>, typeEffect2<\/code>, and typeEffect3<\/code>, each to handle a line of code for the typewriter effect. When the app loads, typeEffect1<\/code> \u2013 which is responsible for creating the typing animation for the first line of code \u2013 will run. After all characters of the first line of code are displayed, the next function (typeEffect2<\/code>) is called which then calls the next.<\/p>\n\n\n\n
Notice we are using setTimeout<\/code> to call the next functions after a few milliseconds of delays. These delays are set to make the typewriter effect look more like how code is actually written. <\/p>\n\n\n\n
Next, let\u2019s add the blinking cursor using the following styles:<\/p>\n\n\n
.typingEffect<\/span> p<\/span> {\n  width<\/span>: fit-content;\n  height<\/span>: fit-content;\n  border-right<\/span>: 2px<\/span> solid transparent;\n}\n\n.typingEffect__line1<\/span> {\n  animation<\/span>: blink 1s<\/span> 2<\/span>;\n}\n\n.typingEffect__line2<\/span> {\n  animation<\/span>: blink 1s<\/span> 2s<\/span> 2<\/span>;\n}\n\n.typingEffect__line3<\/span> {\n  animation<\/span>: blink 1s<\/span> 4s<\/span> infinite;\n}\n\n@keyframes<\/span> blink {\n  0%, 45% {\n    border-color<\/span>: transparent;\n  }\n  50%, 100% {\n    border-color<\/span>: white;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, to add syntax highlighting. First, we will add vue3-highlightjs<\/code> to our app by modifying the main.ts<\/code> file to the following:<\/p>\n\n\n
import<\/span> { createApp } from<\/span> 'vue'<\/span>\nimport<\/span> App from<\/span> '.\/App.vue'<\/span>\nimport<\/span> vue3Highlightjs from<\/span> 'vue3-highlightjs'<\/span>\nimport<\/span> 'highlight.js\/styles\/dracula.css'<\/span>\n\n\ncreateApp(App).use(vue3Highlightjs).mount('#app'<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, we specify where we want to add highlighting using the v-highlightjs<\/code> directive and the language to be highlighted. To do this, modify the template tag in App.vue<\/code> to the following:<\/p>\n\n\n
<template<\/span>><\/span>\n  <code<\/span> class<\/span>=\"typingEffect\"<\/span>><\/span>\n    <div<\/span> v-highlightjs<\/span>=\"typeLine1\"<\/span>><\/span>\n      <code<\/span> class<\/span>=\"typingEffect__line1 javascript\"<\/span>><\/span><\/code<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> v-highlightjs<\/span>=\"typeLine2.text\"<\/span>><\/span>\n      <code<\/span> class<\/span>=\"typingEffect__line2 javascript\"<\/span>><\/span><\/code<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> v-highlightjs<\/span>=\"typeLine3.text\"<\/span>><\/span>\n      <code<\/span> class<\/span>=\"typingEffect__line3 javascript\"<\/span>><\/span><\/code<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/code<\/span>><\/span>\n<\/template<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The syntax highlighting has been added but we will notice that the UI is a bit messy and the blinking cursor is gone. To fix that, add the following styles:<\/p>\n\n\n
.typingEffect<\/span> code<\/span> {\n  padding<\/span>: 0<\/span>;\n  background-color<\/span>: inherit;\n}\n\n.typingEffect<\/span> code<\/span> {\n  width<\/span>: fit-content;\n  height<\/span>: fit-content;\n  border-right<\/span>: 2px<\/span> solid transparent;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
With this, we are done creating the typewriter effect. Try it out in the sandbox:<\/p>\n\n\n\n\t