Site URL: https://www.amandachung.ca/
Hello!
Just wondering how I can change the blinking insertion point line to end where the text ends and not all the way on the far right of the frame. (I figured out how to center the text but I'm not sure how I can make the blinking bar end where the text ends.)
____________________________________________________
CODE (CODE BLOCK):
<div class="typeit">I’m Amanda!</div>
____________________________________________________
CODE (IN CUSTOM CSS):
.typeit {color:black; font-weight:bold; text-align:center;
overflow: hidden;
font-size:45px;
border-right: 3px solid #000000;
white-space: nowrap;
margin: 0 auto;
animation:
typeit 3.5s steps(40, end),
right-border .5s step-end infinite;
}
@keyframes typeit {
from { width: 0 }
to { width: 100% }
}
@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #000000; }
}
____________________________________________________
Password to my site is: amanda
Thank you! 🙂